YogeshChauhan . com

Tackle Accessibility in React with JSX

in React on May 28, 2021

We need to design and create websites that can be used and accessible by each and every one of us, no matter if they are disabled or not. But many times we failed to do so and as a developer I wish we had a clear cut requirements when it comes to accessibility rather than just optional thing to do.

Most of the time you can use standard HTML ways to make the elements accessible but in few cases React/JSX has some additional attributes to make the elements accessible. I have tried to summed up those additional attributes in this post.

Let’s see how you can make your elements accessible in React.

aria-* HTML attributes

AREA stand for Accessible Rich Internet Applications

We can use aria-* HTML attributes to make the elements accessible and they are NOT camelCased.


Semantic HTML

React recommends using React Fragments to group together multiple elements because sometimes adding div to JSX breaks the semantics especially working with list elements like ol, ul, dl or HTML table element.

import React, { Fragment } from 'react';

Accessible Forms


HTML form controls such as labels and inputs need to labeled like this for accessibility:

Make sure you provide descriptive labels for HTML form controls so that if those elements are exposed to screen readers, it makes sense to the person listening to it.

In HTML we use for attribute but in JSX we need to use htmlFor.

<label htmlFor="namedInput">Name:</label>

Programmatically managing focus

Why do we need this?

React apps are constantly modifying the HTML which might leading to keyboard focus being lost. To fix that we need to bring the keyboard focus to the right direction.

To set/reset focus in React, you can use Refs to DOM elements. Use this react guide to do so.

Mouse and pointer events

This is how we can disable an element when clicks outside of the element area:

  componentDidMount() {
    window.addEventListener('click', this.onClickOutsideHandler);
  onClickOutsideHandler(event) {
    if (this.state.isOpen && !this.toggleContainer.current.contains(event.target)) {
      this.setState({ isOpen: false });

That won’t work for keyboard navigation though. This is how to fix it using onBlur and onFocus:

  <div onBlur={this.onBlurHandler}

We also need to define onBlurHandler and onFocusHandler. Like this:

  onBlurHandler() {
    this.timeOutId = setTimeout(() => {
        isOpen: false

  // If a child receives focus, do not close the popover.
  onFocusHandler() {

This is not a complete list. There are lots of things we need to take care of for accessibility. These are some notes from my project. Hope it helps! If not checkout this really good guide on accessibility on React Docs.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Select statement in Postgres with examplesPostgresHow to create ‘share on LinkedIn’ link using just HTML?HTMLclip and clip-path properties in CSSCSSThe basics of CSS Box modelCSSCustom Post Type Template Files in WordPressWordPressHow to remove trailing characters from a string using JavaScript?JavaScript