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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Angular 9 time clock update every minute, second, hourAngularHow to add Read More Read Less Button using JavaScript?JavaScriptNATURAL JOIN in PostgresPostgresHow to add multiple Columns in CSS like Bootstrap?CSSDROP DATABASE (remove a database) from PostgresPostgresNew to  Drupal? Here’s What You Need to KnowDrupal