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:

Example

Pizza Crust

Pizza Delivery

Radio group Widget Implementation Information

Implementation Notes

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

HTML Source Code