Intro

title: "Introduction to React Accessibility" weight: 11 description: "Learn how React components can be built with accessibility in mind, using hooks for focus management, conditional ARIA attributes in JSX, and component patterns that enforce accessibility at the component level." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, react]

React accessibility means building components that manage focus with hooks like useRef and useEffect, apply ARIA attributes conditionally in JSX, render live regions for dynamic content, and maintain keyboard navigation using React's component model to enforce accessibility at every instance.

## What You'll Learn

You will understand React-specific accessibility patterns, how components can encapsulate accessibility behavior, the tools available for React accessibility testing, and common React accessibility pitfalls.

## Why It Matters

React's component model is ideal for accessibility. A well-built accessible component encapsulates all keyboard handling, ARIA attributes, and focus management -- so every instance of that component is automatically accessible.

## Real-World Use

At DodaTech, Doda Browser uses React components with built-in accessibility patterns, and Durga Antivirus Pro's dashboard uses React hooks for focus management in scan result panels.

## React Accessibility Flow

```mermaid
flowchart TD
  A[React Component] --> B{Interactive?}
  B -->|Yes| C[Keyboard handling]
  B -->|No| D[Semantic HTML]
  C --> E[useRef + useEffect]
  C --> F[onKeyDown handlers]
  C --> G[Conditional ARIA]
  E --> H[Focus management]
  F --> I[Keyboard navigation]
  G --> J[Dynamic ARIA states]

React Accessibility Basics

Components should use semantic HTML, manage focus with hooks, apply ARIA attributes conditionally, and handle keyboard events.

function AccessibleButton({ label, onClick, disabled }) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      aria-disabled={disabled}
      style={{ minWidth: 44, minHeight: 44 }}
    >
      {label}
    </button>
  );
}

/* Focus indicator for React components */
.react-btn:focus-visible {
  outline: 3px solid #4A90D9;
  outline-offset: 2px;
}

// Focus management with hooks
import { useRef, useEffect } from 'react';

function FocusablePanel({ isOpen, children }) {
  const panelRef = useRef(null);

  useEffect(() => {
    if (isOpen && panelRef.current) {
      panelRef.current.focus();
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div
      ref={panelRef}
      role="region"
      aria-label="Settings panel"
      tabIndex={-1}
    >
      {children}
    </div>
  );
}

Common Mistakes

• Using divs instead of semantic HTML elements
• Not managing focus when components mount or update
• Applying ARIA attributes unconditionally
• Forgetting keyboard event handlers on interactive components
• Creating components that are only accessible by mouse
• Not testing React components with screen readers
• Breaking accessible patterns with unnecessary abstraction

Practice and Challenge

Practice 1: Convert a div-based button to a semantic button element. Practice 2: Add focus management to a modal component. Practice 3: Add conditional ARIA attributes to an accordion. Practice 4: Test a React component with axe-core. Practice 5: Add keyboard handlers to a custom listbox.

Challenge: Build a reusable accessible Card component in React that includes: proper heading hierarchy, keyboard navigation, focus management, and correct ARIA attributes. The card should work correctly when used multiple times on the same page.

FAQ

Mini Project

Create a reusable React component library with 5 accessible components: Button, Input, Modal, Accordion, and Tabs. Each component must include: proper semantic HTML, keyboard navigation, focus management, ARIA attributes, and screen reader support.

What's Next

Semantic HTML in JSX covers using semantic HTML elements in React components.