Skip to main content

Chapter 5: ARIA and React

Introduction to ARIA​

Accessible Rich Internet Applications (ARIA) is a set of attributes that augment HTML with the aim of improving the accessibility of web applications, particularly for people with disabilities. ARIA does this by providing roles, states, and properties that describe dynamic and complex UI behaviors to assistive technologies like screen readers.

Understanding ARIA Roles​

ARIA roles help define the purpose of an element, or how that element behaves within the context of the user interface. Some common ARIA roles include button, checkbox, dialog, menu, and slider.

<div role="button" tabIndex="0" onClick={handleClick}>
  Fake Button
</div>

Understanding ARIA States and Properties​

ARIA states and properties provide additional information about an element's current condition and how it relates to other elements. These attributes often change as a result of user interaction.

For example, the aria-expanded state can inform users that a dropdown menu is open or closed:

<button aria-expanded={isOpen} onClick={toggleMenu}>
  Menu
</button>

Using ARIA with React​

React supports all ARIA attributes out of the box. When you use them in your JSX, you need to use the camelCase naming convention, just like you would with other HTML attributes in React.

Here's a more complex example using ARIA with React: a collapsible content panel (often called an accordion).

import React, { useState } from 'react';

function CollapsiblePanel({ title, children }) {
  const [isOpen, setIsOpen] = useState(false);

  const handleClick = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <button
        aria-expanded={isOpen}
        aria-controls="panel-content"
        onClick={handleClick}
      >
        {title}
      </button>
      <div id="panel-content" role="region" hidden={!isOpen}>
        {children}
      </div>
    </div>
  );
}

In this component, we use aria-expanded to communicate the current state of the collapsible panel, and aria-controls to associate the button with the content it controls.

##Common Mistakes When Using ARIA

While ARIA can enhance accessibility when used correctly, it can also create accessibility issues when used improperly. Here are a few common mistakes:

  1. Overuse of ARIA: ARIA should only be used when there's no suitable HTML element or attribute. Overusing ARIA can lead to more complexity and potential confusion for assistive technologies.
  2. Incorrect usage: Using the wrong ARIA attribute, or using an ARIA attribute incorrectly, can miscommunicate information to users.
  3. Dynamic changes: When ARIA attributes change dynamically (like in a single-page application), it can be difficult to ensure those changes are communicated to assistive technologies.

Conclusion​

Understanding and using ARIA correctly can help make complex React applications accessible. By being mindful of ARIA roles, states, and properties, and by avoiding common mistakes, you can enhance the accessibility of your React applications. In the next chapter, we'll discuss how to test the accessibility of your websites.