Radio Button Example (aria-activedescendant)

This example implements the features of the Radio Button Design Pattern using aria-activedescendant for identifying the radio button with the focus.

Similar examples include:

Radio Button Example: Radio button group using roving tabindex for managing keyboard focus.

Example

Pizza Crust

Regular crust
Deep dish
Thin crust

Pizza Delivery

Pick up
Home Delivery
Dine in Restaurant

Radio group Widget Implementation Information

Implementation Notes

Uses CSS attribute selectors for synchronizing aria-checked state with the visual state indicator.
Uses CSS :hover psuedo selector for visual hover styling.
Uses CSS .focus class for visual keyboard focus styling.

Keyboard Support

Key	Function
`Tab`	Moves keybaord focus to `radiogroup` and `aria-activedescendant` points to the `radio` button that is checked. If no `radio` button is checked, `aria-activedescendant` points to the first `radio` button in the group.
`Space`	If the `radio` button pointed to with `aria-activedescendant` is unchecked, it's state will be changed to checked.
`Down arrow`	Moves `aria-activedescendant` pointer to next `radio` button in the group. If `aria-activedescendant` points to the last `radio` button in the group, move pointer to the first `radio` button.
`Up arrow`	Moves `aria-activedescendant` pointer to previous `radio` button in the group. If `aria-activedescendant` points to the first `radio` button in the group, move pointer to the last `radio` button.

ARIA Roles, Properties and States

Role	Attributes	Element	Usage
`radiogroup`		`ul`	The `role="radiogroup"` attribute identifies the `div` element as a container for a group of `radio` buttons. The descendent `radio` buttons are considered part of the group. The accessible name comes the `aria-labelledby` attribute, which points to the element that contains the label text. The `radiogroup` widget has a `tabindex="0"` and becomes part of the tab order of the page.
	`tabindex="0"`	`ul`	When using `aria-activedescendant` the `radiogroup` widget has a `tabindex="0"`. When the radio group has keyboard focus the accessibility API uses the `[IDREF]` value of `aria-activedescendant` to point to the `radio` button that has focus. See managing focus using `aria-activedescendant` for more information
	`aria-activedescendant="[IDREF]"`	`ul`	The `aria-activedescendant` attribute identifies the active `radio` button within a `radiogroup` by referencing the `id` value of the `radio` button that is active. See managing focus using `aria-activedescendant` for more information
	`aria-labelledby="[IDREF]"`	`ul`	The `aria-labelledby` attribute points to the element that contains the test for defining an accessible name (e.g. label) for the group of `radio` buttons.
`radio`		`li`	The `role="radio"` attribute identifies the `div` element as an ARIA `radio` button. The accessible name comes the child text content of the `div` element. The `radio` widget does not need a `tabindex` value, since the `ul[role"radiogroup"]` element never receives keyboard focus.
	`id="[IDREF]"`	`li`	All `radio` buttons in a group need an `id` value for reference by the `aria-activedescendant`. See managing focus using `aria-activedescendant` for more information
	`aria-checked="false"`	`li`	Indentifies the `radio` button is not checked. CSS attribute selectors (e.g. `[aria-checked="false"]`) are used to synchornize the visual states with the value of the `aria-checked` attribute. The CSS `:before` psuedo selector and the `content` property is used to indcate visual state of unchecked to support high contrast setting in operating systems and browsers.
	`aria-checked="true"`	`li`	Indentifies the `radio` button is checked. CSS attribute selectors (e.g. `[aria-checked="true"]`) are used to synchornize the visual states with the value of the `aria-checked` attribute. The CSS `:before` psuedo selector and the `content` property is used to indcate visual state of checked to support high contrast setting in operating systems and browsers.

Javascript and CSS Source Code

CSS: radioActiveDescendant.css
Javascript: radioGroupActiveDescendant.js
Javascript: radioButtonActiveDescendant.js

HTML Source Code