ReactJS - Accessibility

Accessibility (a11y) is designing the web application in such a way that the application will be accessible by everyone and support assistive technology to read the content of the application for the end user.

React supports all the aspects of accessibility in a web application. Let us see how react supports accessibility in this chapter.

ARIA (aria-*) attributes

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a standard specifying ways to build fully accessible JavaScript widgets. It provides a large set of HTML attributes (aria-*) to support accessibility. React supports all those attributes in its components. In general, React restricts the HTML attributes to be in the form of camelCase, but for accessibility attributes, it should be in the form of kebab-case or lisp-case or simply as it is in the HTML document.

For example, the below code shows how to use the HTML accessibility attributes.

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

Here,

  • aria-label is used to specify the label of the input element

  • aria-required is used to specify that the input should be filled.

Note that the attributes are use as it is (in kebab-case format).

Sematic HTML

A web document coded by applying the sematic HTML (article, section, navigation, etc.,) tags improves the accessibility of the document. In react, there are situation where we use blocks (div) just to satisfy the react framework. For example, react does not support multiple tags in its render code. To overcome the restriction, developer may use parent tag (div) to make the multiple tags as children.

function ShowItems({ data }) {
   return (
      <div>
         <dt>{data.title}</dt>
         <dd>{data.description}</dd>
      </div>
   );
}

React provides Fragment component to work around the scenario. We can just replace Fragment instead of div as shown below −

function ShowItems({ data }) {
   return (
      <Fragment>
         <dt>{data.title}</dt>
         <dd>{data.description}</dd>
      </Fragment>
   );
}

Forms

Every input should be labeled and the label should be descriptive to understand the input element. React provides a special props htmlFor to specify the input element for the specific description. Developer can use it create accessible forms.

<label htmlFor="firstName">Firstname:</label>
<input id="firstName" type="text" name="name"/>

Keyboard support

Keyboard support is a must for creating accessible web application. Some of the features expecting keyboard support are,

Focus − React provides a concept called Ref to access the raw DOM element. When the application needs raw access to DOM element, Ref and Forwarding Ref can be used to manage the raw DOM element.

Skip links − Skip navigation links are must feature to support accessibility. They allows the user to skip all the navigation in one go when accessing the application using only keyboard. It can be done using smart anchor tags, which are fully supported by react.

<body>
<a href="#maincontent">Skip to main content</a>
...
<main id="maincontent">
   ...
</main>

Mouse and pointer functionality − To create a true accessible application, all the feature should be accessible through keyboard. Component with high level mouse and pointer based user interaction should be changed to accommodate keyboard only user interaction. React provides all event handling logic to modify the default mouse based UI to keyboard based UI.

Aria components

React community provides many components with full accessibility support. They can be used as it is without any modification. They automatically enables the application to be accessible. Some of the third party components with aria support are as follows −

  • react-aria − react-aria provides large set of react component with full accessibility support

  • react-modal − react-modal provides modal component with aria support.

  • react-aria-modal − react-aria-modal is yet another modal component with aria support.

  • react-select − react-select provides select component with aria support.

  • react-dropdown-aria − react-dropdown-aria provides dropdown component with aria support.

  • react-aria-menubutton − react-aria-menubutton provides menu button component with aria support.

  • react-aria-tabpanel − react-aria-tabpanel provides tab panel component with aria support.

Summary

React provides many features to create fully accessible, aria supported web application. Creation of accessible application is always a challenge and react reduces the burden a bit in the form of ready-made component as well as core feature to write a accessible application from the scratch.

Advertisements