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 |
|
Space |
|
Down arrow |
|
Up arrow |
|
ARIA Roles, Properties and States
Role | Attributes | Element | Usage |
---|---|---|---|
radiogroup |
ul |
|
|
tabindex="0" |
ul |
|
|
aria-activedescendant="[IDREF]" |
ul |
|
|
aria-labelledby="[IDREF]" |
ul |
|
|
radio |
li |
|
|
id="[IDREF]" |
li |
|
|
aria-checked="false" |
li |
|
|
aria-checked="true" |
li |
|
Javascript and CSS Source Code
- CSS: radio.css
- Javascript: radioGroupActiveDescendant.js
- Javascript: radioButtonActiveDescendant.js
HTML Source Code