React Accessibility

Introduction

Accessibility (often abbreviated as "a11y") refers to the design of products, devices, services, or environments for people who experience disabilities. In web development, it means ensuring that your applications can be used by as many people as possible, regardless of their abilities or disabilities.

React applications need to be accessible to ensure that all users, including those who rely on assistive technologies like screen readers, can effectively use them. This guide will help you understand how to build accessible React applications by following best practices and utilizing tools provided by React and the broader web ecosystem.

Why Accessibility Matters

Inclusive Design: Creating applications that everyone can use regardless of disabilities
Legal Requirements: Many jurisdictions have laws requiring digital accessibility
SEO Benefits: Many accessibility practices also improve search engine optimization
Better User Experience: Accessible apps are typically more user-friendly for everyone

HTML Semantics in React

React encourages the use of standard HTML, which already includes many accessibility features. Using the correct semantic HTML elements is your first step toward building accessible applications.

Example: Using Semantic HTML

jsx
// ❌ Poor accessibility - using divs for everything
const BadNavigation = () => {
  return (
    <div className="navigation">
      <div className="nav-item" onClick={() => navigateTo('home')}>Home</div>
      <div className="nav-item" onClick={() => navigateTo('about')}>About</div>
      <div className="nav-item" onClick={() => navigateTo('contact')}>Contact</div>
    </div>
  );
};

// ✅ Good accessibility - using semantic HTML
const GoodNavigation = () => {
  return (
    <nav>
      <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  );
};

In the good example, we use:

<nav> to indicate a navigation section
<ul> and <li> for list structure
<a> tags for proper links that keyboard users can navigate

Accessible Forms

Forms are a critical part of many web applications. Making them accessible ensures all users can input data and interact with your application.

Example: Accessible Form Elements

jsx
// ❌ Poor accessibility - no labels, no feedback
const InaccessibleForm = () => {
  return (
    <div>
      <input type="text" placeholder="Enter your name" />
      <input type="email" placeholder="Enter your email" />
      <div onClick={() => submitForm()}>Submit</div>
    </div>
  );
};

// ✅ Good accessibility - proper labels and structure
const AccessibleForm = () => {
  const [error, setError] = useState('');
  
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      // Form submission logic
    }}>
      <div>
        <label htmlFor="name">Name:</label>
        <input 
          id="name" 
          type="text" 
          aria-required="true" 
          aria-invalid={error ? "true" : "false"}
        />
      </div>
      
      <div>
        <label htmlFor="email">Email:</label>
        <input 
          id="email" 
          type="email" 
          aria-required="true"
          aria-describedby="email-error"
        />
        {error && <div id="email-error" className="error">{error}</div>}
      </div>
      
      <button type="submit">Submit</button>
    </form>
  );
};

Key accessibility improvements:

Using <form> and <button type="submit"> for native form handling
Associating <label> with inputs using htmlFor and matching id
Using ARIA attributes (aria-required, aria-invalid, aria-describedby)
Providing error feedback that's programmatically associated with the relevant input

Focus Management

Proper focus management is crucial for keyboard users. React applications often create and destroy DOM elements, which can cause issues with keyboard focus.

jsx
import React, { useRef, useEffect } from 'react';

const AccessibleModal = ({ isOpen, onClose, title, children }) => {
  const modalRef = useRef(null);
  const previousFocusRef = useRef(null);
  
  useEffect(() => {
    if (isOpen) {
      // Store the current active element to restore focus later
      previousFocusRef.current = document.activeElement;
      
      // Set focus to the modal
      if (modalRef.current) {
        modalRef.current.focus();
      }
    } else if (previousFocusRef.current) {
      // Restore focus when modal closes
      previousFocusRef.current.focus();
    }
  }, [isOpen]);
  
  // Close when Escape is pressed
  const handleKeyDown = (event) => {
    if (event.key === 'Escape') {
      onClose();
    }
  };
  
  if (!isOpen) return null;
  
  return (
    <div 
      className="modal-overlay" 
      onClick={onClose}
    >
      <div 
        className="modal"
        ref={modalRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-title"
        tabIndex={-1}
        onClick={e => e.stopPropagation()}
        onKeyDown={handleKeyDown}
      >
        <div className="modal-header">
          <h2 id="modal-title">{title}</h2>
          <button 
            onClick={onClose}
            aria-label="Close modal"
          >
            ×
          </button>
        </div>
        <div className="modal-body">
          {children}
        </div>
      </div>
    </div>
  );
};

// Usage
const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  
  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      
      <AccessibleModal 
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        title="Accessible Modal Example"
      >
        <p>This is an accessible modal dialog.</p>
        <button onClick={() => setIsModalOpen(false)}>Close</button>
      </AccessibleModal>
    </div>
  );
};

Key accessibility features:

Tracking and restoring focus when the modal opens and closes
Using appropriate ARIA roles (role="dialog", aria-modal="true")
Labeling the modal with aria-labelledby
Handling Escape key for closing the modal
Making the modal focusable with tabIndex={-1}

ARIA (Accessible Rich Internet Applications)

When standard HTML isn't enough, ARIA attributes can provide additional information to assistive technologies.

Common ARIA Attributes

jsx
// Example of a custom dropdown using ARIA
const CustomDropdown = ({ options, selectedOption, onChange }) => {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <div className="custom-dropdown">
      <button
        aria-haspopup="listbox"
        aria-expanded={isOpen}
        onClick={() => setIsOpen(!isOpen)}
      >
        {selectedOption || "Select an option"}
      </button>
      
      {isOpen && (
        <ul 
          role="listbox"
          aria-activedescendant={`option-${selectedOption}`}
          tabIndex={-1}
        >
          {options.map((option) => (
            <li
              key={option}
              id={`option-${option}`}
              role="option"
              aria-selected={option === selectedOption}
              onClick={() => {
                onChange(option);
                setIsOpen(false);
              }}
            >
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

Some important ARIA attributes used:

aria-haspopup: Indicates the button opens a menu
aria-expanded: Communicates whether the dropdown is open or closed
role="listbox" and role="option": Define the roles of the elements
aria-selected: Indicates which option is currently selected
aria-activedescendant: Identifies the currently active element in a composite widget

Color Contrast and Visual Accessibility

Visual accessibility is crucial for users with vision impairments. Ensure your application has sufficient color contrast and doesn't rely solely on color to convey information.

Example: Ensuring Proper Color Contrast

jsx
// ❌ Poor accessibility - low contrast text and color-only indication
const PoorContrastComponent = () => {
  return (
    <div style={{ backgroundColor: '#f0f0f0' }}>
      <p style={{ color: '#c0c0c0' }}>This text has poor contrast</p>
      <div>
        <span style={{ color: 'red' }}>Error state</span>
        <span style={{ color: 'green' }}>Success state</span>
      </div>
    </div>
  );
};

// ✅ Good accessibility - high contrast and additional indicators
const GoodContrastComponent = () => {
  return (
    <div style={{ backgroundColor: '#f0f0f0' }}>
      <p style={{ color: '#505050' }}>This text has good contrast</p>
      <div>
        <span aria-live="polite">
          <span aria-hidden="true" role="img">❌</span>
          <span style={{ color: '#D32F2F' }}>Error: Form submission failed</span>
        </span>
        <span aria-live="polite">
          <span aria-hidden="true" role="img">✅</span>
          <span style={{ color: '#2E7D32' }}>Success: Form submitted</span>
        </span>
      </div>
    </div>
  );
};

Key improvements:

Using higher contrast colors for text
Adding icons alongside colors to convey information
Using aria-live to announce status changes to screen readers

Testing Accessibility

Testing your application for accessibility is essential. There are several tools available that can help you detect accessibility issues.

The eslint-plugin-jsx-a11y package provides ESLint rules that help you enforce accessibility best practices in your JSX code.

jsx
// Installation
// npm install --save-dev eslint-plugin-jsx-a11y

// In your .eslintrc.js file
module.exports = {
  plugins: ['jsx-a11y'],
  extends: ['plugin:jsx-a11y/recommended'],
  rules: {
    // You can customize specific rules
    'jsx-a11y/label-has-associated-control': ['error', {
      required: {
        some: ['nesting', 'id']
      }
    }],
  }
};

Using React Testing Library

React Testing Library encourages accessible testing practices by focusing on how users interact with your components.

jsx
// Example test for an accessible button
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import ButtonComponent from './ButtonComponent';

test('button is accessible and functions correctly', async () => {
  const handleClick = jest.fn();
  
  render(<ButtonComponent onClick={handleClick} label="Submit Form" />);
  
  // Find the button by its accessible name (the text content or aria-label)
  const button = screen.getByRole('button', { name: /submit form/i });
  
  // Ensure the button is in the document
  expect(button).toBeInTheDocument();
  
  // Test keyboard accessibility
  button.focus();
  expect(document.activeElement).toBe(button);
  
  // Test click handler
  await userEvent.click(button);
  expect(handleClick).toHaveBeenCalledTimes(1);
  
  // Test keyboard interaction
  button.focus();
  await userEvent.keyboard('{Enter}');
  expect(handleClick).toHaveBeenCalledTimes(2);
});

Real-World Example: Accessible Tabs Component

Here's a complete example of an accessible tabs component implementing all the best practices we've discussed:

jsx
import React, { useState } from 'react';

const AccessibleTabs = ({ tabs }) => {
  const [activeTab, setActiveTab] = useState(0);
  
  const handleKeyDown = (e, index) => {
    let newIndex;
    
    switch (e.key) {
      case 'ArrowRight':
        newIndex = (index + 1) % tabs.length;
        break;
      case 'ArrowLeft':
        newIndex = (index - 1 + tabs.length) % tabs.length;
        break;
      case 'Home':
        newIndex = 0;
        break;
      case 'End':
        newIndex = tabs.length - 1;
        break;
      default:
        return;
    }
    
    e.preventDefault();
    setActiveTab(newIndex);
    document.getElementById(`tab-${newIndex}`).focus();
  };
  
  return (
    <div className="tabs-container">
      <div role="tablist" aria-label="Content tabs">
        {tabs.map((tab, index) => (
          <button
            id={`tab-${index}`}
            key={`tab-${index}`}
            role="tab"
            aria-selected={activeTab === index}
            aria-controls={`panel-${index}`}
            tabIndex={activeTab === index ? 0 : -1}
            onClick={() => setActiveTab(index)}
            onKeyDown={(e) => handleKeyDown(e, index)}
          >
            {tab.title}
          </button>
        ))}
      </div>
      
      {tabs.map((tab, index) => (
        <div
          id={`panel-${index}`}
          key={`panel-${index}`}
          role="tabpanel"
          aria-labelledby={`tab-${index}`}
          tabIndex={0}
          hidden={activeTab !== index}
        >
          {tab.content}
        </div>
      ))}
    </div>
  );
};

// Usage example
const App = () => {
  const tabData = [
    { title: 'Profile', content: <p>User profile information goes here.</p> },
    { title: 'Settings', content: <p>User settings go here.</p> },
    { title: 'Notifications', content: <p>Notifications preferences go here.</p> },
  ];
  
  return (
    <div className="app">
      <h1>User Dashboard</h1>
      <AccessibleTabs tabs={tabData} />
    </div>
  );
};

This tabs component implements:

Proper ARIA attributes for tabs (role="tablist", role="tab", role="tabpanel")
Keyboard navigation between tabs
Focus management
Proper labeling with aria-labelledby and aria-controls

Summary

Creating accessible React applications requires attention to several key areas:

Semantic HTML: Use the right elements for their intended purpose
Keyboard Navigation: Ensure users can navigate your app without a mouse
ARIA Attributes: Add appropriate ARIA roles and properties when needed
Focus Management: Control focus properly, especially in dynamic content
Color Contrast: Ensure sufficient contrast for readability
Testing: Use specialized tools to verify accessibility

By following these best practices, you'll create React applications that can be used by everyone, regardless of their abilities or disabilities.

Additional Resources

React Accessibility Docs
WebAIM (Web Accessibility in Mind)
The A11y Project
axe DevTools - Browser extension for accessibility testing

Exercises

Take an existing React component you've built and enhance it with proper accessibility features.
Create an accessible form with validation that provides appropriate feedback to all users.
Implement a modal dialog that properly manages focus and can be used with keyboard only.
Set up eslint-plugin-jsx-a11y in your project and fix any accessibility issues it identifies.
Test a component with React Testing Library using the different accessibility queries.

Remember that accessibility is not a feature; it's a requirement. By building with accessibility in mind from the start, you'll create better experiences for all users and develop better coding practices overall.

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)

Introduction​

Why Accessibility Matters​

HTML Semantics in React​

Example: Using Semantic HTML​

Accessible Forms​

Example: Accessible Form Elements​

Focus Management​

Example: Managing Focus in a Modal​

ARIA (Accessible Rich Internet Applications)​

Common ARIA Attributes​

Color Contrast and Visual Accessibility​

Example: Ensuring Proper Color Contrast​

Testing Accessibility​

Using eslint-plugin-jsx-a11y​

Using React Testing Library​

Real-World Example: Accessible Tabs Component​

Summary​

Additional Resources​

Exercises​