Radio Group Example Using Roving tabindex

Important Note About Use of This Example

Note: This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA-AT project plans to provide measurements of this example's assistive technology support by the end of 2020.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

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:

Radio Group Example Using aria-activedescendant: Radio button group that uses aria-activedescendant for managing keyboard focus.

Example

Pizza Crust

Regular crust

Deep dish

Thin crust

Pizza Delivery

Pickup

Home Delivery

Dine in

Accessibility Features

Uses CSS attribute selectors for synchronizing aria-checked state with the visual state indicator.
Uses CSS :hover and :focus pseudo-classes for styling visual keyboard focus and hover.
- Focus indicator encompasses both radio button and label, making it easier to perceive which option is being chosen.
- Hover changes background of both radio button and label, making it easier to perceive that clicking either the label or button will activate the radio button.
- Because transparent borders are visible on some systems with high contrast enabled, only the focused element has a visible border. When focusable elements are not focused, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.

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.
`Down arrow` `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.
`Up arrow` `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.

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-element 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-element 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

CSS: radio.css
Javascript: radio.js

HTML Source Code

<div role="radiogroup"
     aria-labelledby="group_label_1"
     id="rg1">
  <h3 id="group_label_1">
    Pizza Crust
  </h3>
  <div role="radio"
       aria-checked="false"
       tabindex="0">
    Regular crust
  </div>
  <div role="radio"
       aria-checked="false"
       tabindex="-1">
    Deep dish
  </div>
  <div role="radio"
       aria-checked="false"
       tabindex="-1">
    Thin crust
  </div>
</div>
<div role="radiogroup"
     aria-labelledby="group_label_2"
     id="rg2">
  <h3 id="group_label_2">
    Pizza Delivery
  </h3>
  <div role="radio"
       aria-checked="false"
       tabindex="0">
    Pickup
  </div>
  <div role="radio"
       aria-checked="false"
       tabindex="-1">
    Home Delivery
  </div>
  <div role="radio"
       aria-checked="false"
       tabindex="-1">
    Dine in
  </div>
</div>