Accessibility

Test labels, keyboard interaction, focus and status announcements in your app.

Names and labels

Give text inputs an associated label. Icon-only buttons need an aria-label. Hide decorative icons from the accessibility tree, and give Icon a label when it conveys information.

Keyboard and focus

Test the main tasks without a mouse, using Tab, Shift+Tab and each control's supported keys. Check that focus returns to the Trigger when a Dialog or menu closes.

States and feedback

Use text as well as color to explain values, selection and errors. Add text and live regions in your app to announce server requests, uploads and message delivery. The generating state does not set aria-busy automatically.

Common checklist

Follow each component's Accessibility checklist, then test these areas in your app:

  • Names and states: Give controls accessible names and expose their values, selection and errors. Use text and accessibility attributes as well as color and icons.
  • Keyboard and focus: Check that controls work without a mouse and focus stays visible. Keep display-only elements out of the tab order unless they need keyboard interaction. When an element closes or disappears, move focus to an appropriate element, such as its trigger or the next action.
  • Contrast and screen size: Check text and control contrast against the background. Content and actions must remain available at 200% zoom, on narrow screens and in both light and dark themes.
  • Screen readers: Test names, roles, states and reading order with VoiceOver or another screen reader in your app. Announce changes when needed and avoid repeating the same information.
  • Motion: Test animations with the operating system's reduced-motion setting enabled. State changes and results must still be clear.

You still need to test accessibility in your app, even when a component provides accessibility props.