ARIA radiogroup 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 selected 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”…)
• test2

Pizza Crust

Regular crust

Deep dish

Thin crust

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.
• img element 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. (Note: CSS background image techniques or generated content 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-1.css
• Javascript: radio-1.js