React MUI Screen Readers

Last Updated : 29 Jan, 2023

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.

Folder Structure

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:

Screen Reader for Button

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;