Accessibility
The target is WCAG 2.2 AA. The components handle the mechanics; pages still need good headings, labels and alt text.
Built into the components
- Native elements first: buttons are buttons, links are links, selects are selects.
- Overlays, tabs, accordions, checkboxes and switches use Radix primitives for keyboard support and ARIA.
- A visible 2px focus ring on every interactive element.
- Field wires labels, hints and errors with for, aria-describedby and aria-invalid.
Tested on every change
- Every text and surface pairing in both themes is checked for 4.5:1 contrast in
packages/ui/src/tokens/tokens.test.ts. - Each component group is rendered and run through axe-core in unit tests.
- Keyboard behavior (dialog focus, tab arrows, accordion, tooltips on focus) has interaction tests.
Page checklist
- One h1, and headings that don’t skip levels.
- A SkipLink before the header and id="main" on the main element.
- Every image has alt text, or alt="" if decorative.
- Link text makes sense out of context.
- Content reflows at 320px and at 200% zoom.
- Nothing essential is only in a tooltip, or only conveyed by color.