Web Accessibility in React

What is Web Accessibility?

Web Accessibility, also known as A11y ( Cause there are 11 letters between “a” and “y” ), is the idea that a website should be usable by people irrespective of their physical disability or internet bandwidth speed, or socio-economic shortcoming.
So making our compatibility with keyboard support and screen readers makes it possible for users with visual or motor disabilities to access the information. Making sites lightweight and performant allows users with low-speed internet to use our sites. Creating websites that are responsive makes them not only useful for people with desktops but also for tablets and smartphones.
The World Wide Web Consortium (W3C)’s Web Accessibility Initiative (WAI) publishes the published the Web Content Accessibility Guidelines (https://www.w3.org/WAI/standards-guidelines/wcag/).

How to improve Web Accessibility.

There are a few simple points we can keep in mind.

1. Using HTML tags properly
   • Using semantic tags ( <header> <nav> <table> <article> ).
   • Using <buttons> and <a> for interactive elements.
   • Defining alt attribute in <img>.
   • Using <label> with form input tags.
2. Handling focus and keyboard tab navigation.
3. Making content on the web page responsive with screen size.
4. Making the website’s code bundles small.

So using proper HTML tags, and making the website responsive and performant is not something that is done differently in a website built with React. But managing the focus different in React than in other JS frameworks or vanilla JS.

Focus management in React for web accessibility

Proper focus management on the website reduces confusion for keyboard-only users and people accessing the website through screen readers. Cause if the focus does not shift from one element to another logically in order as it should it can be a huge bummer for user experience.

To take a common everyday example of opening a modal by clicking a button on the screen. So a keyboard user will Tab Tab Tab and reach to the button that opens the modal, press enter and now if the user presses tab the focus should traverse on the modal, not the page.

This is will not be naturally achieved cause modal elements will not lie in chronological order of the HTML tags on the webpage. So we need the magic of Javascript to control the focus.

To achieve this in React I will discuss a simple dropdown component.

const Dropdown = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const list = React.useRef(null);

  const onFocus = (e) => {
    if (e.key === 'Enter') {  
      setIsOpen(!isOpen);
    }
  };

  React.useEffect(() => {
    if (isOpen) {
      const div = list.current.querySelector('div');
      div.focus();
    }
  }, [isOpen]);

  return (
    <>
      <button onKeyDown={(e) => onFocus(e)}>menu</button>
      {isOpen && (
        <div className="list" tabIndex="-1" ref={list}>
          <div className="focus" tabIndex="0">
            option 1
          </div>
          <div className="focus" tabIndex="0">
            option 2
          </div>
        </div>
      )}
    </>
  );
};

In the above code, we have a menu button and associated with a list of options. The button is created using a <button> tag so is automatically focusable with using the Tab key. When the focus is on the menu button and we press “Enter” the focus should go on the first option and then the second.

Targeting Element using useRef

To target an element in React, we have to use the useRef hook and bind the reference with element. So we create a ref for the options list wrapper element.

const list = React.useRef(null);

<div className="list" tabIndex="-1" ref={list}>

Important Note: tabIndex=”-1″ allows the element’s focus to be controlled by Javascript.

Using useEffect to manage focus

Then in the useEffect we look when the menu is open and we use list ref to get the first option and make it focus.

React.useEffect(() => {
    if (isOpen) {
      const div = list.current.querySelector('div');
      div.focus();
    }
  }, [isOpen]);

Example of moving the focus from button to option

Resources

React Documentation on A11y: https://reactjs.org/docs/accessibility.html

A11y checklist: https://www.a11yproject.com/checklist/

Related articles on React

React and Webpack: https://blog.knoldus.com/create-a-react-app-without-create-react-app/

React state management using Context API: https://blog.knoldus.com/best-way-to-manage-in-react-using-context-usereducer-and-custom-hook/

For more updates on such topics, please follow our LinkedIn page- FrontEnd Studio