Accessibility (a11y) isn't a nice-to-have feature. It's a legal requirement in many jurisdictions, a significant market opportunity, and — most importantly — the right thing to do. Here's a practical guide to making your React apps WCAG 2.1 AA compliant.
The Big Wins (Do These First)
1. Semantic HTML
This alone fixes 50% of accessibility issues. Use <button> for actions, <a> for navigation, <nav>, <main>, <article> for landmarks. Every <div onClick> is an accessibility bug.
2. Keyboard Navigation
Every interactive element must be reachable and operable via keyboard. Test by tabbing through your entire app — if you can't complete every workflow with just a keyboard, it's broken.
- Visible focus indicators (never
outline: nonewithout a replacement) - Logical tab order (match visual flow)
- Focus trapping in modals
- Skip-to-content links
3. Color and Contrast
WCAG AA requires 4.5:1 contrast ratio for normal text, 3:1 for large text. Don't convey information through color alone — add icons, underlines, or text labels.
4. Alt Text and Labels
Every image needs alt text (or alt="" for decorative images). Every form input needs a visible <label>. Every icon button needs aria-label.
React-Specific Patterns
- Announce route changes — SPAs don't trigger screen reader announcements on navigation. Use
aria-liveregions or libraries like@reach/router. - Manage focus on page transitions — After navigation, move focus to the new page's
<h1>or main content area. - Use Radix UI or React Aria — These headless component libraries handle ARIA patterns correctly out of the box. Don't reinvent dropdowns, modals, or tabs.
Testing Your Accessibility
- Automated: axe-core (catches ~30% of issues), integrated into CI via jest-axe
- Manual: Keyboard-only testing, screen reader testing (VoiceOver on Mac, NVDA on Windows)
- Audit: Annual professional audit for WCAG AA compliance certification
The Business Case
Beyond legal compliance: accessible sites rank better in search, have lower bounce rates, and reach 25% more potential customers. It's not charity — it's good business.
Need an accessibility audit or remediation? Our team builds inclusive experiences from the ground up.
