React MUI屏幕阅读器

屏幕阅读器，比如谷歌的Talkback，是一种使用盲文显示或朗读文本的软件工具。有视力问题、阅读障碍或暂时不能阅读的人可能会从使用屏幕阅读器中受益。屏幕阅读器会朗读和阅读出可见内容。应用程序会识别段落和按钮文本，以及隐藏的材料，如图标和标题的替代文本。内容可以被标记，以改善那些使用屏幕阅读器或希望以纯文本模式查看您的UI的用户的体验。

为什么不使用”display: none”属性？

为了在页面上隐藏内容，开发者经常使用”display: none”样式。不幸的是，这种常见做法可能对使用屏幕阅读器的人造成问题，特别是如果隐藏的内容是为他们而设的。”display: none”属性不会向有视觉问题的人们宣布内容，因此他们很难进行交互。因此，我们使用”Visually Hidden”元素来向需要的人宣布内容。

语法:

<Component sx={ visuallyHidden } />

首先，我们将从在VS Code中创建一个React应用程序开始。

步骤1： 在任何命令行中写入以下代码以创建React应用。

npx create-react-app app_name

步骤2： 然后，我们需要进入我们将要操作的文件夹。

cd project_name

步骤3： 我们将安装 @mui/material 库来在我们的项目中使用。

npm install @mui/material @emotion/react @emotion/styled

项目结构： 在创建React应用程序并安装所有依赖项后，文件夹结构将类似于下图所示。

React MUI屏幕阅读器

运行应用程序的步骤：在终端中写下面的代码以运行服务器：

npm start

示例1： 下面是对视力障碍人士的按钮以及点击按钮时的工作的代码。

要听叙述者的声音，您必须打开辅助功能，方法如下：

Setting -> Accessibility -> Narrator -> Narrator = on  (in windows 11).

import React from 'react'; 
import { Box, Button } from '@mui/material'; 
import { visuallyHidden } from '@mui/utils'; 
  
const ScreenReader = () => { 
   return ( 
       <Box sx={{ width: '200px', height: '150px',  
        boxShadow: 2, margin: '10px', justifyContent: 'center',  
           alignItems: 'center', display: 'flex' }}> 
           <Box sx={ visuallyHidden }> 
               Click on the Button below to Log in. 
           </Box> 
           <Button variant='contained' color='success'> 
               Login 
           </Button> 
       </Box> 
   ); 
} 
  
export default ScreenReader;

输出：

React MUI屏幕阅读器

示例2： 以下是针对视觉障碍人士的链接和链接信息的代码。

要听叙述者的声音，您需要打开无障碍功能，方法如下：

Setting -> Accessibility -> Narrator -> Narrator = on  (in windows 11).

import * as React from 'react'; 
import { Box, Link } from '@mui/material'; 
import { visuallyHidden } from '@mui/utils'; 
  
const ScreenReader = () => { 
  return ( 
    <Link href="#hidden" sx={{ margin: '10px' }}> 
      More information 
      <Box sx={visuallyHidden}>This is visually hidden information</Box> 
    </Link> 
  ); 
} 
  
export default ScreenReader;

输出：

React MUI屏幕阅读器