Skip to content


What component has

Keyboard support

Keyboard support
TabMoves focus to the checked radio button in the radiogroup. If a radio button isn’t checked, focus moves to the first radio button in the group.
Shift + TabMoves focus to the previous focusable element.
SpaceIf the radio button with focus isn’t checked, changes the state to checked. Otherwise, does nothing. Note: The state where a radio isn’t checked only occurs on page load.
Up Arrow, Down Arrow, Left Arrow, Right ArrowMoves focus to and checks the next/previous radio button in the group. If focus is on the last/first radio button, moves focus to the first/last radio button respectively. The state of the previously checked radio button is changed to unchecked.

Roles and attributes

The list below describes roles and attributes that component already has.

Roles and attributes
radiodivIdentifies the div element as an ARIA radio button. The accessible name is computed from the child text content of the div element.
tabIndex="0"divMakes the radio button focusable and includes it in the page Tab sequence. Set on only one radio in the radio group. On page load, is set on the first radio button in the radio group. Moves with focus inside the radio group so the most recently focused radio button is included in the page Tab sequence. This approach to managing focus is described in the section on roving tabindex.

Considerations for developers

  • The <fieldset> surrounds the entire grouping of checkboxes or radio buttons. The <legend> provides a description for the grouping.
  • Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive. This helps someone using assistive technology to understand the question they are answering with the group of radio buttons.

Find live examples in the A11y style guide.

Roles & attributes

The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in your interfaces.

Roles and attributes
radiogroupdivIdentifies the div element as a container for a group of radio buttons. Isn’t focusable because focus is managed using a roving tabindex strategy as described below.
aria-labelledby="[IDREF]"divRefers to the element that contains the label of the radio group.
tabindex="-1"divMakes the element focusable but not part of the page Tab sequence. Applied to all radio buttons contained in the radio group except for one that is included in the page Tab sequence. This approach to managing focus is described in the section on roving tabindex.


Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.