Radio Button Example
This example implements the features of the Radio Button Design Pattern for selecting a pizza crust and delivery method.
Similar examples include:
- Radio Button Example (aria-activedescendant): Radio button group using
aria-activedescendant
for managing keyboard focus.
Example Start
Pizza Crust
Regular crust
Deep dish
Thin crust
Pizza Delivery
Pickup
Home Delivery
Dine in
Radio group Widget Implementation Information
Implementation Notes
- Uses CSS attribute selectors for synchronizing
aria-checked
state with the visual state indicator. - Uses CSS
:hover
and:focus
psuedo selectors for styling visual keyboard focus and hover.
Keyboard Support
Key | Function |
---|---|
Tab |
|
Space |
|
Down arrow |
|
Up arrow |
|
ARIA Roles, Properties and States
Role | Attributes | Element | Usage |
---|---|---|---|
radiogroup |
div |
|
|
aria-labelledby="[IDREF]" |
div |
|
|
radio |
div |
|
|
tabindex="-1" |
div |
|
|
tabindex="0" |
div |
|
|
aria-checked="false" |
div |
|
|
aria-checked="true" |
div |
|
Javascript and CSS Source Code
- CSS: radio.css
- Javascript: radioGroup.js
- Javascript: radioButton.js