Web accessibility is making the website or software accessible to all the users, including the people with disabilities (auditory, cognitive, neurological, physical, speech, and visual impairments). It also includes the ability to access website/software in slow network connection, in devices that have different input types or smaller screens, etc.
Basically, the application we build should be for everyone!
Spending some time making our React app accessible from the start can help to ensure a wider range of people can use all the amazing interfaces we building.
Thankfully, making React applications accessible requires only minor changes! In this blog, we will look into the ways to improve the accessibility of React application.
Let’s consider the example mentioned in React a11y codesandbox.
Ways to make React apps accessible
1. Using Semantic HTML
Semantic HTML is the foundation of accessibility in a web application. Using Semantic HTML properly based on the content provides accessibility by default.
<div> to wrap components -
<div> breaks the semantics of the table.
<Fragment> instead of
<div> fixes the UI.
<button> instead of customizing
<div> to behave like a button -
On navigating to a custom button using keyboard and hitting
onClick event is not called.
Whereas doing the same on the
<button>, calls the
Using the semantic Html
provides us out of box functionality for keyboard accessibility.
To make the
onClick event work using a keyboard on the custom button,
we have to explicitly add
2. Using ARIA attributes
ARIA (Accessible Rich Internet Applications ) is a collection of attributes that define ways to increase the accessibility of websites, applications, and web content.
We know that semantic markup makes our codebase more readable for screen readers. We can get even more specific now with ARIA attributes.
aria-* HTML attributes are fully supported in JSX.
Most of the DOM properties and attributes in React are camelCased,
ARIA attributes should be hyphen-cased as they are in plain HTML.
In the below example, by looking at the
we know what the button does.
3. Setting the document title
We should set the document
describe the user what the page is about!
- Using lifecycle method -
4. Accessing forms
We need to provide descriptive labels to our form elements
as we do for HTML forms to increase accessibility.
These standard HTML practices can be directly used in React.
The only difference is that the
for attribute is written as
htmlFor in JSX.
5. Focus management
We need to manage focus programmatically depending on the requirement. To set focus in React, we can use Refs to DOM elements.
In the below example, when we click on the ‘Show Focus’ button using a mouse or keyboard, the focus is shifted from the button to the input.
6. Mouse and pointer events
All functionalities exposed through a mouse or pointer event should also be accessed using the keyboard alone.
Let’s take an example mentioned in React accessibility doc, where a user can disable an opened popover by clicking outside the element.
A keyboard cannot receive click events.
But the same functionality can be achieved by using appropriate event handlers instead,
6. Alt Text on Images
alt attribute is another quick way of making our React app more accessible.
The purpose of the
alt text is for the person hearing it to understand the content of the image. It should be specific enough that the person can imagine the image without seeing it.
Development assistance for Accessibility
The eslint-plugin-jsx-a11y plugin for ESLint provides AST linting feedback regarding accessibility issues in our JSX.
Create React App
has this plugin with a subset of rules activated.
We can enable even more accessibility rules,
by creating a
.eslintrc file in the root of our project
and add the below content -
Testing accessibility in the browser
More details on accessibility are available on React accessibility doc.