Radio Group Example Using Roving tabindex

This example implements the features of the Radio Group Design Pattern for two radio groups -- one for choosing a pizza crust and another for choosing a delivery method. This implementation uses a roving tabindex for managing focus within the radio group.

Similar examples include:

Example

Pizza Crust

Regular crust
Deep dish
Thin crust

Pizza Delivery

Pickup
Home Delivery
Dine in

Accessibility Features

Keyboard Support

Key Function
Tab
  • Moves focus to the checked radio button in the radiogroup.
  • If a radio button is not checked, focus moves to the first radio button in the group.
Space
  • If the radio button with focus is not checked, changes the state to checked.
  • Otherwise, does nothing.
  • Note: The state where a radio is not checked only occurs on page load.
Right arrow
  • Moves focus to and checks the next radio button in the group.
  • If focus is on the last radio button, moves focus to the first radio button.
  • The state of the previously checked radio button is changed to unchecked.
Down arrow
  • Moves focus to and checks the next radio button in the group.
  • If focus is on the last radio button, moves focus to the first radio button.
  • The state of the previously checked radio button is changed to unchecked.
Left arrow
  • Moves focus to and checks the previous radio button in the group.
  • If focus is on the first radio button, moves focus to and checks the last radio button.
  • The state of the previously checked radio button is changed to unchecked.
Up arrow
  • Moves focus to and checks the previous radio button in the group.
  • If focus is on the first radio button, moves focus to and checks the last radio button.
  • The state of the previously checked radio button is changed to unchecked.

Role, Property, State, and Tabindex Attributes

Role Attributes Element Usage
radiogroup div
  • Identifies the div element as a container for a group of radio buttons.
  • Is not focusable because focus is managed using a roving tabindex strategy as described below.
aria-labelledby="[IDREF]" div Refers to the element that contains the label of the radio group.
radio div
  • Identifies the div element as an ARIA radio button.
  • The accessible name is computed from the child text content of the div element.
tabindex="-1" div
  • Makes 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.
tabindex="0" div
  • Makes 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.
aria-checked="false" div
  • Identifies radio buttons which are not checked.
  • CSS attribute selectors (e.g. [aria-checked="false"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • The CSS ::before pseudo-class is used to indicate visual state of unchecked radio buttons to support high contrast settings in operating systems and browsers.
aria-checked="true" div
  • Identifies the radio button which is checked.
  • CSS attribute selectors (e.g. [aria-checked="true"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • The CSS ::before pseudo-class is used to indicate visual state of checked radio buttons to support high contrast settings in operating systems and browsers.

Javascript and CSS Source Code

HTML Source Code