ARIA radiogroup and radio Example

Authoring Practice Design Patten for Radio Group

• The radiogroup role defines a container for a set of ARIA radio buttons.
• The radio button that is currently checked is identified using aria-checked=“true”.
• Only one radio button can be selected at a time, all other radio buttons should define aria-checked as “false".
• The label for the radio group is defined using aria-labelledby attribute. (e.g. “Pizza Crust”)
• The labels for the radio buttons are defined by the text nodes of each radio button. (e.g. “Regular Crust”, “Deep Dish”…)

Radio Example

Accessibility Feature

• div element with role radio has onkeydown event to support keyboard activation of the radio.
• div element with role radio has tabindex="0" to become part of the tab order of the page.
• Each radio has tabindex="-1" except one.
• CSS Generated Content is used to visually indicate the state of radio (e.g. checked, unchecked). To ensure the visual state will be visible when browsers or operating system use “High Contrast” settings by people with visual impairments; the visuals are created in CSS rather than via the use of a background image. (Note: CSS background image techniques result in visual state disappearing when browsers or operating systems are configured to display high contrast themes.)
• setRadioButton function uses aria-checked attribute to make sure the information communicated to asssitive tecnology is the same as the visual state. (e.g. img element)
• onfocus and onblur event handlers on radio support visual focus styling for keyboard only users.

Keyboard Support

ARIA Roles, Properties and States

Source Code

• CSS: radio.css
• Javascript: radio.js