Accessibility in React: Building Inclusive Web Applications

Why Accessibility Matters for Developers

Web accessibility means building applications that work for everyone, including people who use screen readers, keyboard-only navigation, or other assistive technologies. Beyond the moral argument, accessibility is legally required in many jurisdictions (ADA, WCAG compliance). For developers on Upwork and in client work, clients increasingly require WCAG 2.1 AA compliance as part of their acceptance criteria.

Semantic HTML: The Foundation

Accessibility starts with semantic HTML. Use button elements for interactive controls (not div or span with onClick), nav for navigation, main for main content, article for self-contained content, and heading elements (h1-h6) in proper hierarchy. Screen readers use these semantic roles to build a document outline and announce interactive elements to users. In React, never use a div where a button, link, or form element is appropriate.

ARIA Attributes in React

ARIA (Accessible Rich Internet Applications) attributes add semantic meaning to elements when native HTML semantics are insufficient. Common examples: aria-label for buttons without visible text, aria-expanded for accordion toggles, aria-live='polite' for dynamic content updates, aria-invalid and aria-describedby for form errors. Use React's JSX syntax with camelCase: aria-label='Close dialog' or aria-expanded={isOpen}.

Keyboard Navigation and Focus Management

Every interactive element must be keyboard accessible and visible when focused. Test your app by unplugging your mouse and navigating with Tab, Shift+Tab, Enter, Space, and arrow keys. Manage focus programmatically when users open a modal (focus the modal), close it (return focus to the trigger), or navigate to a new route (focus the main heading). Use useRef and the .focus() method for programmatic focus management.

Color Contrast and Visual Accessibility

WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Use a contrast checker tool to verify your color palette. In Tailwind CSS, most gray-on-white combinations pass, but low-contrast color combinations (light gray text on white, yellow text on white) fail. Never convey information through color alone — always pair color with text, icons, or patterns.

Testing Accessibility

Use the axe browser extension or the jest-axe library in tests to automatically catch common accessibility violations. Test with a real screen reader — NVDA (Windows, free), VoiceOver (Mac/iOS, built-in), or TalkBack (Android). Automated tools catch about 30% of accessibility issues — manual testing is essential for the rest. Add an accessibility check to your CI pipeline using @axe-core/react or the eslint-plugin-jsx-a11y linter.