Foundations

Accessibility

The components do the hard parts. Here is what you get, how it is tested, and what is still yours to do.

Keyboard

Every control works with the keyboard, with the keys people expect from the ARIA patterns. Focus rings show only for keyboard focus.

Screen readers

Roles, names, states and descriptions from React Aria, tested with VoiceOver, NVDA and JAWS by Adobe. Labels, help text and errors are linked to their fields.

Contrast

Text tokens pass WCAG 2.2 AA on the surfaces they are meant for, in dark and light. Faint text is for secondary details only.

Motion

Animations respect prefers-reduced-motion. Nothing flashes.

Touch and pointer

Controls are at least 32 px, 40 to 48 px by default. Press states work the same for mouse, touch and pen.

Internationalization

Right-to-left layouts, localized number and date formats, and translated built-in strings come from React Aria.

How it is tested

Unit tests with Testing Library for each component: roles, names, keyboard, states.
axe on every component, valid and invalid states.
Browser tests over every docs page in dark and light: no console errors, and axe again with real colors for contrast.

Still up to you

Write real labels, link text and error messages.
Give each page one h1 and a sensible heading order.
Name icon-only buttons with aria-label (the types require it).
Check contrast when you change the tokens; the Fun Lab Contrast Checker helps.