How to handle accessibility in a React application

It is essential for us to prioritize accessibility when building applications. By making our React applications accessible, we ensure that people with disabilities can effectively use and navigate our websites.

What is web accessibility?

Web accessibility refers to the practice of designing and developing websites and web applications in a way that ensures equal access and usability for all users, regardless of their abilities or disabilities. It involves creating digital content that can be easily perceived, operated, and understood by everyone, including people with visual, auditory, motor, cognitive, and other disabilities.

There are several tools available that may perform accessibility audits on web sites in our browser like aXe, aXe-core and react-axe.

Aspects of web accessibility

Ways to make React apps accessible

We will explore some of the ways to make our React apps accessible.

Semantic HTML

Semantic HTML elements provide meaning and structure to web content. Instead of using generic <div> elements, use appropriate semantic elements like <header>, <nav>, <main>, <footer>, and <article>. These elements help screen readers and assistive technologies to better understand the content and navigate through it.

HTML Semantic Elements

Example

<header>
  <h1>Welcome to My React App</h1>
</header>

Implementation

Keyboard navigation

Ensure that all interactive elements may be accessed and used solely through the keyboard. Instead of relying entirely on mouse events, incorporate keyboard event handlers for critical actions. To specify the tab order of components and ensure focus indicators are visible, tabindex attribute is used.

Example

<button onClick={handleClick} tabIndex="0">
  Click Me
</button>

Implementation

Accessible forms

Make forms accessible by providing appropriate labels for form controls using the <label> element. Associate the label with its corresponding input using the htmlFor attribute or by nesting the input within the label.

Example

<label htmlFor="email">Email:</label>
<input type="email" id="email" />

Implementation

Alt text for images

Always include descriptive alternative text for images using the alt attribute. This ensures that screen readers can convey the image content to users who cannot see it.

Use concise but meaningful descriptions that convey the purpose or information conveyed by the image.

Example

<img src="image.jpg" alt="A person using a laptop in a coffee shop" />

Implementation

ARIA roles and attributes

ARIA (Accessible Rich Internet Applications) roles and attributes can be used to enhance the accessibility of custom components. Use ARIA roles such as role="button", role="list", or role="dialog" to provide appropriate information about the purpose and behavior of custom UI elements.

Example

<div role="button" onClick={handleClick}>
  Click Me
</div>

Implementation

Focus Management

Focus management ensures that users can navigate through the application using the keyboard. Set the focus appropriately when components mount or certain actions occur. Use the focus() method to control focus programmatically and ensure it is neither trapped nor lost accidentally.

Example

const inputRef = useRef();

useEffect(() => {
  inputRef.current.focus();
}, []);

return <input ref={inputRef} />;

Implementation

Color contrast

To ensure color contrast, you can create a CSS file (e.g., styles.css) and define appropriate styles for your text and background elements.

Use a tool like WCAG Color Contrast Checker to check the contrast ratio of your chosen colors.

Example

/* styles.css */

body {
  color: #333; /* Text color */
  background: #fff; /* Background color */
}

Implementation

Screen reader support

To provide screen reader support, you can use ARIA attributes in your React components.

Example

import React from 'react';

const Button = () => {
  return (
    <button aria-label="Delete">Delete</button>
  );
};

export default Button;

Implementation

Error handling

For error handling, you can display descriptive error messages and associate them with corresponding form fields.

Example

const handleSubmit = (e) => {
    e.preventDefault();
    if (/* Form validation fails */) {
      setError('Please enter a valid email.');
    } else {
      // Submit the form
    }
};

Implementation

Conclusion

A complete approach is required when developing an accessible React application, with a focus on semantic HTML, keyboard navigation, form accessibility, alt text for images, ARIA roles and attributes, focus management, color contrast, screen reader support, error handling, etc. By following these rules, we can ensure that our React application is accessible to all people, regardless of their abilities.

Relevant Answers

Explore Courses

Free Resources