Accessibility
The radio group follows the WAI-ARIA Radio Group pattern — a set of mutually exclusive options where choosing one clears the rest — and meets WCAG 2.1 AA. An accessible radio group is reachable and operable from the keyboard as a single unit, keeps assistive technology informed of which option is chosen, and gives the group and every option an accessible name — so the choice is clear whether the user is looking at it, listening to it, or tabbing through it.
For designers
Section titled “For designers”- Every option and state must maintain accessible contrast on every supported surface. Source: WCAG 1.4.3 Contrast (Minimum).
- The selected state must never be conveyed by colour alone — the filled control and its border carry the state alongside any colour change. Source: WCAG 1.4.1 Use of Color.
- Focus styles must stay visible, meet contrast requirements on every supported surface, and be clearly distinguishable from hover. Source: WCAG 2.4.7 Focus Visible.
- Use semantic colour tokens (e.g.
foreground/neutral/default) rather than fixed values, so the component adapts correctly across themes and surfaces.
For developers
Section titled “For developers”Build the group from native <input type="radio"> elements that share one name. The browser then treats them as a single composite: it enforces single selection, moves focus between options with the arrow keys, and reports which option is chosen — all without custom ARIA. Because the semantics are native, add no role or aria-* to reproduce them; reserve markup for wiring up accessible names, which the Labelling elements section covers per element.
Keyboard interaction
Section titled “Keyboard interaction”| Key | Action |
|---|---|
| Tab / Shift + Tab | Move focus into the group (landing on the selected option), or out to the next / previous control |
| ↓ / → | Move to and select the next option |
| ↑ / ← | Move to and select the previous option |
| Space | Select the focused option |
The full row — control plus its label — is the interactive target, keeping it comfortably above the WCAG AA minimum for touch. Source: WCAG 2.5.8 Target Size (Minimum).
Focus order
Section titled “Focus order”The whole group is a single tab stop: Tab enters it once, landing on the selected option (or the first when none is selected), and the arrow keys then rove the selection within it — a roving tabindex keeps only that entry option in the tab sequence while the rest carry tabindex="-1". The keys that drive this are in the Keyboard interaction table above.
- Focused option
Source: WCAG 2.4.3 Focus Order.
Labelling elements
Section titled “Labelling elements”Give the group and every option the role, name, and state assistive technology needs.
Radio group
The <fieldset> exposes the options as one group; its <legend> gives the group its accessible name, which assistive technology announces before each option so the category is heard once. Keep the legend a clear question or the dimension the options vary along.
Radio option
Each native <input type="radio"> reports its radio role automatically and takes its accessible name from the <label> that wraps it — the <span> text — so keep that text self-describing. The native checked attribute conveys the selected state; no aria-checked is needed.
Source: WCAG 4.1.2 Name, Role, Value.