Expressive

Foundations

Accessibility

Keyboard support, screen reader semantics, focus management and reduced motion come built in. Here's what Expressive handles, and what's still up to you.

What's built in

  • Behavior from Base UI. Interactive components are built on Base UI primitives, which handle roles, ARIA state, keyboard interaction and focus management (for example the dialog's focus trap and the radio group's arrow keys).
  • Required names. Icon buttons and icon-only FABs don't type-check without aria-label or aria-labelledby.
  • Contrast by construction. Every color role has an on- role generated to contrast with it. The contrast option raises it further.
  • Visible keyboard focus on every interactive element, only when navigating by keyboard.
  • Reduced motion. Springs drop to zero duration and ripples are skipped when the OS asks for reduced motion.
  • Tested. Each component has tests for keyboard use and ARIA state, and an automated axe check.

What's up to you

  • Label every form control: wrap checkboxes, radios and switches in a <label>, and give sliders thumbLabels.
  • Give each dialog a DialogTitle, and each radio group a name.
  • Check contrast for colors you add yourself, outside the roles.
  • Don't put information only in a tooltip; it isn't reachable on touch screens.
  • When you change a component's code, keep its roles and keyboard handling intact.