The React Accessibility Checklist for 2026: WCAG 2.1 AA

Accessibility is not a feature you add at the end — it's a set of decisions you make throughout development. This checklist covers the WCAG 2.1 AA requirements that are most commonly missed in React apps.

Keyboard navigation

• Every interactive element is reachable with Tab and Shift+Tab
• Modal dialogs trap focus while open and restore focus when closed
• Dropdown menus support arrow-key navigation, Home/End, and typeahead
• Tab panels switch with arrow keys, not just click
• Accordion items expand/collapse with Enter or Space
• No keyboard traps — users can always navigate away from any element

ARIA semantics

• Use semantic HTML first (button, nav, main, aside, section, ul, ol)
• Add aria-label only when the accessible name isn't visible (icon-only buttons)
• Use aria-expanded on toggle triggers (accordion, dropdown, drawer)
• Use aria-current for the active page in navigation
• Use role="status" and aria-live="polite" for dynamic content updates (toasts, chat messages)
• Don't add ARIA roles that duplicate semantic HTML (role="button" on a <button>)

Forms

• Every input has a label (use <label> or aria-labelledby)
• Error messages are associated with inputs via aria-describedby
• Invalid inputs have aria-invalid="true"
• Required fields have aria-required="true" or the HTML required attribute
• Field descriptions appear before errors in the DOM for consistent screen reader order

Color contrast

• Normal text: 4.5:1 minimum contrast ratio against background
• Large text (18pt+ or 14pt+ bold): 3:1 minimum
• UI components and graphical elements: 3:1 minimum
• Test both light and dark mode
• Don't rely on color alone to convey information (add icons, text, or patterns)

Focus management

• Visible focus indicators on all interactive elements (don't remove outline without replacement)
• Skip-to-content link at the top of the page
• Focus moves to modals/drawers when they open
• Focus returns to the trigger when modals/drawers close
• Route changes in SPA move focus to the new page content

Testing

• Automated: run axe-core in CI (vitest-axe for unit tests, @axe-core/playwright for e2e)
• Manual: navigate every page with keyboard only — no mouse
• Screen reader: test with NVDA (Windows), VoiceOver (macOS), or TalkBack (Android)
• Zoom: test at 200% browser zoom — layout should not break
• Reduced motion: respect prefers-reduced-motion in animations

Ninna UI handles most of this automatically — Radix internals cover keyboard navigation and ARIA, the theme presets meet contrast ratios, and 708 vitest-axe tests run in CI. But your app-level markup, content, and custom interactions still need manual review.