Accessibility

The target

Every component aims at WCAG 2.2 level AA. Components are built on React Aria, which handles keyboard behaviour, focus and screen reader roles for the hard cases such as comboboxes, date pickers, menus and dialogs. Each component page lists the keys it responds to, what a screen reader announces, and the rules to follow when you use it.

What is checked automatically

• Every example on this site runs through axe, an automated accessibility checker, in tests that must pass before a release.
• Keyboard behaviour is tested per component: Tab order, arrow keys, Enter, Space and Escape, and where focus goes after a dialog or menu closes.
• Every example is opened at phone and tablet width, and the page must not scroll sideways.
• Tap targets on a phone are scanned: links and buttons must be at least 24 by 24 pixels.
• Docs pages must not take focus or scroll by themselves when they open.
• Animations stop for visitors who prefer reduced motion, and each motion example has a Still switch.
• Colour is never the only way to say something: errors, warnings and statuses also use text or an icon.

Forms and permissions

Form fields have visible labels, errors are announced and linked to their field, and a form with several errors lists them in a summary that takes focus. A control you are not allowed to use stays focusable, says why, and is not just hidden.

What is not done yet

Automated tests find a share of the problems, not all of them. A full pass by people using NVDA, VoiceOver and a keyboard alone has not been done yet. The checklist for it is in the repository, and results will be published here when it is finished. If you find a barrier, please open an issue.