Web / React Accessibility Patterns
Welcome to the Web / React section of A11y Context.
This corpus provides prescriptive, production-ready accessibility patterns for React applications. Each pattern documents the must-have semantics, focus management rules, and keyboard behavior, plus a golden implementation and a checklist of acceptance criteria.
What's here
| Section | Description |
|---|---|
| Foundations | Baseline accessibility rules applied across all UI work |
| Components | Browse all components at a glance |
| Release Notes | Catalog revision history |
How to use these patterns
- Select a component from the sidebar or the Components catalog.
- Read the Must Haves section. These are non-negotiable for WCAG 2.2 AA conformance.
- Apply the Golden Pattern code as your starting implementation.
- Run through the Acceptance Checks as part of your pull request review.
All patterns target WCAG 2.2 Level AA and the ARIA Authoring Practices Guide (APG).
A note on the code in these patterns
The Golden Pattern code in each component file is a reference implementation, not a runnable demo. It is written to be consumable by AI coding agents at code-generation time: minimal JSX that exposes the required semantic structure and behavior contract, with no styling or framework boilerplate that would distract from the accessibility decisions.
This is deliberate. A fully-styled, fully-wired example would render beautifully on this site but it would also bloat what the agent has to load and reason over, embed visual-design choices that are not the corpus's job to make, and tempt readers to copy-paste production code instead of authoring it inside their own design system. The pattern is the spec; the agent applies it where the developer actually works.
Verification against assistive technology (keyboard navigation, screen readers) is performed by the project maintainer as part of pattern authoring and review.