React MUI Screen Readers
A screen reader, such as Google’s Talkback, is a software tool that uses a braille display or reads text aloud. People with vision problems, reading challenges, or who are momentarily unable to read may benefit from using a screen reader. Screen readers will articulate and read aloud the visual content. The application recognizes paragraph and button text, as well as hidden material such as alternative text for icons and headings. Content can be labeled to improve the experience for users who use screen readers or want to view your UI in text-only mode.
Why not use the ‘display: none’ property?
To conceal content on the page, developers frequently use the display: none style. Unfortunately, this routine practice can provide issues for those who use screen readers, particularly if the concealed content was intended for them to find. The property display: none will not announce the content to the people will vision problem and hence they find it difficult to interact. So we use Visually Hidden elements to announce the content to the person in need.
Syntax:
<Component sx={ visuallyHidden } />
First of all, we will start with creating a React app in VS Code.
Step 1: Create React app by writing the below code in any command line.
npx create-react-app app_name
Step 2: Then, we have to move into the folder we will be working on.
cd project_name
Step 3: We will be installing the @mui/material library for working on our project.
npm install @mui/material @emotion/react @emotion/styled
Project Structure: After creating React App and installing all the dependencies, the folder structure will look similar to the figure given below.
Steps to run the application: Write the below code in the terminal to run the server:
npm start
Example 1: Below is the code for visually impaired people about the button and its working on clicking it.
To listen to the narrator’s voice you have to turn on the Accessibility by:
Setting -> Accessibility -> Narrator -> Narrator = on (in windows 11).
Javascript
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; |
Output:
Example 2: Below is the code for visually impaired people about the link and information in that link.
To listen to the narrator’s voice you have to turn on the Accessibility by:
Setting -> Accessibility -> Narrator -> Narrator = on (in windows 11).
Javascript
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; |
Output:
Reference: https://mui.com/system/screen-readers/#foo