Radios (Grouped) — Accessibility Specification (WCAG 2.1 AA)

What is this component?

What is this component? Radios allow choosing exactly one option within a set. Group by shared name and provide a group label via <fieldset>/<legend>.

Accessibility Requirements

Requirement	WCAG Criteria	Description
Grouping	1.3.1	Use fieldset/legend; one selection per group.
Labels	3.3.2	Each radio has a descriptive label.
Keyboard	2.1.1	Tab into group; arrow keys move; Space selects.
Focus Visible	2.4.7	Provide clear focus styles.

ARIA Roles and Attributes

ARIA Role/Attribute	Used On	Purpose & Usage
`<input type="radio">`	Native radio	Preferred; exposes role and state.
`role="radiogroup"`	Custom container	Use when building non‑native groups; manage focus and `aria-checked`.

Implementation Guidelines



  Shipping speed
   Standard
   Expedited
   Priority

DO’s

Use native radios with shared name.
Provide a meaningful group legend.
Keep labels clickable.

Don’ts

Don’t mix radios and checkboxes for one choice.
Don’t omit the legend in complex forms.
Don’t separate inputs from labels.

Common Pitfalls

Multiple checked items: missing shared name.
No arrow support: custom radios ignoring key navigation.

Testing Checklist

Test Item	WCAG Criteria	Pass Criteria
Group announced	1.3.1	Legend read as group name.
Keyboard	2.1.1	Arrows move; Space selects; Tab exits group.