Radio Button

Radio buttons let users select exactly one option from a mutually exclusive set, grouped under a shared question or prompt conveyed through a fieldset and legend.

Demo

Tab into the radio group and use the arrow keys to move between options. Notice how selecting one option automatically deselects the others. Confirm that the group label and each option label are both announced by a screen reader when navigating.

Select your pizza size

Extra Large Serves 8 people

Large Serves 6 people

Medium Serves 4 people

Small Serves 1 person

What to Observe

Tab moves focus into the radio group, and arrow keys move selection between options within the group.
Selecting any radio automatically deselects the previously selected one, maintaining mutual exclusivity.
The fieldset legend is announced alongside each radio label, providing the group question as context.
Each radio is paired with a visible label that is clickable and expands the tap/click target.
The focused radio displays a clear focus indicator that meets contrast requirements.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Fieldset: The grouping element that wraps all radio options and their shared legend.
Legend: The visible group label that describes the question or category the radio options answer.
Radio input: The native input element of type radio that handles selection, keyboard navigation, and assistive technology announcements.
Option label: The visible text label associated with each radio input via a for/id pairing.
Focus indicator: The visible outline or highlight that appears on the currently focused radio control.

Accessibility Behavior

All radio options in a group must share the same name attribute so they form a mutually exclusive set.
The group must be wrapped in a fieldset with a legend that describes the shared question — this is announced by screen readers alongside each option.
Each radio input must be paired with a visible label using a matching for and id relationship.
Keyboard navigation within a group uses arrow keys to move between options — Tab moves between groups, not between individual radios.
The currently selected radio must be communicated to screen readers as checked, not only through visual styling.
A radio group must have at least one option pre-selected by default, or the group must be validatable with appropriate error handling if left empty.

Common Mistakes

Omitting the fieldset and legend, so screen reader users hear each option label without any context about what they are choosing.
Using div elements styled to look like radio buttons without underlying native inputs, breaking built-in keyboard and screen reader behavior.
Giving each radio a unique name attribute instead of a shared one, preventing mutual exclusivity.
Associating labels with radios using proximity rather than a programmatic for/id link, so the label is not reliably announced.
Making only the radio circle clickable rather than including the label in the hit area, creating a small and difficult target.

Why This Matters

Radio buttons appear in surveys, settings panels, and checkout flows where choosing the wrong option can have real consequences. When the group question is missing, a screen reader user hears a list of options with no understanding of what they are deciding. When native inputs are replaced with styled divs, the entire keyboard and screen reader experience breaks down. Using native HTML inputs inside a properly labeled fieldset costs nothing extra and guarantees robust, cross-platform support for all users.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.