Yogesh Chauhan's Blog

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.



<input
  type="text"
  aria-label={labelText}
  aria-required="true"
  value={inputValue}
  name="name"
/>


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';
...
...
    <Fragment>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </Fragment>
...
...


Accessible Forms

Labeling

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}
       onFocus={this.onFocusHandler}>
...


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



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

  // If a child receives focus, do not close the popover.
  onFocusHandler() {
    clearTimeout(this.timeOutId);
  }
...


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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to compile and watch Sass using Gulp in WordPress?SCSSHow to redirect or load a new document using JavaScript?JavaScriptValues and Types Basics in JavaScriptJavaScriptDifference between :where and :is in CSSCSSHow to add a Line Chart in Angular App?AngularHow to read Standard Input in Swift?Swift