Reference
Accessibility
State in ARIA, visible focus, keyboard and reduced motion. What each piece guarantees and what's up to you.
What the system guarantees
- State in ARIA attributes, also read by the CSS:
aria-checked,aria-selected,aria-expanded,aria-current,aria-sort. - Visible focus on every control, with a 2px outline in the text color.
- Text measured at 4.5:1 on the panel, in both themes. See the live numbers in Tokens.
- Reduced motion zeroes the durations and leaves each piece in its final state.
- Charts drawn in svg get
role="img"and anaria-labelwith the summary.
Keyboard per component
| Component | Keys |
|---|---|
| Select | Enter, Space and arrows open; arrows, Home, End and letters navigate; Enter picks; Esc closes. |
| Slider | Arrows move one step; Home and End go to the ends. |
| Segmented | Arrows change the option and wrap around. |
| Period | Tab to the arrows, Enter steps. |
| Calendar | Tab through the days, Enter picks. No arrow navigation in the grid. |
| Bars | Tab per column shows the value. |
| Charts | The period picker has keyboard support. The per-item highlight is pointer-driven. |
What's up to you
- Icon-only buttons need an
aria-label. - Search needs an
aria-labelon the input: a placeholder is not a name. - Segmented and the model radiogroup need an
aria-labelon the host. data-tipis visual: repeat the text inaria-label.- On mobile, a standalone control deserves 44px of height: use
u-btn--lg.