Accessibility

Built in#

Keyboard

Every interactive component works with the keyboard and follows the matching WAI-ARIA pattern (listbox, tabs, radio group, switch).

Focus

Focus rings use --ring and only show for keyboard focus, so mouse users don't see them and keyboard users always do.

Contrast

Every text and background pair is tested at 4.5:1 in light and dark. A token change that breaks a pair fails the build.

Not color alone

Status always carries words or a shape: badges have text and an optional dot, checkboxes a check, invalid fields an error message.

Forms

Field links label, help text and error to its control with htmlFor and aria-describedby, and marks it invalid and required.

Motion

All motion follows prefers-reduced-motion and the data-motion switch. Loading indicators slow down instead of stopping.

Testing

Components are tested with Testing Library and run through axe in the test suite.

Still up to you#

• Label every control. Placeholder text isn't a label.
• Give icon-only buttons an aria-label.
• Name groups (radio groups, tab lists) with aria-label or aria-labelledby.
• Don't put the only copy of important information in a tooltip.
• Write error messages that say how to fix the problem.
• Check contrast if you add your own colors; the theming page shows how.

Per component#

Every component page has a keyboard map and notes under Accessibility.