React and Accessibility: A Natural Pair
React's component-by-component nature makes it ideal for building accessible interfaces systematically. Each component can encapsulate accessibility best practices once and be reused everywhere. However, JSX's particularities (camelCase naming, fragments, portals) require specific attention.
ARIA in JSX
React natively supports all ARIA attributes in JSX. Unlike standard HTML attributes (camelCase in React), ARIA attributes keep their hyphenated format: aria-expanded, aria-controls, aria-label, etc. The first rule is using native HTML elements (<button>, <a>, <nav>) instead of divs with ARIA roles.
React Aria: The Reference Library
React Aria (by Adobe) provides hooks encapsulating accessibility logic: useButton, useTextField, useComboBox, useDialog, useTable, useDatePicker, useMenu. It is headless (unstyled), giving full design control with robust accessibility.
Focus Management in React
Focus management is crucial in React SPAs: move focus to h1 or main on route changes, trap focus in modals, announce AJAX results, and use useRef + focus() for programmatic focus management.
Accessibility Testing in React
Use jest-axe for unit tests, @testing-library/react for role/label-based element targeting, and eslint-plugin-jsx-a11y for development-time error detection.
React provides the tools to create accessible interfaces, but developers must use them correctly. Accessibility should be integrated from the first component, not added at the end of a project.