Radio Group Example Using Roving tabindex
Read This First
The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
- There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
- The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
- Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.
About This Example
This example implements the features of the Radio Group Pattern for two radio groups -- one for choosing a pizza crust and another for choosing a delivery method. This implementation uses a roving tabindex for managing focus within the radio group.
Similar examples include:
- Radio Group Example Using aria-activedescendant: Radio button group that uses
aria-activedescendant
for managing keyboard focus. - Rating Radio Group Example: Radio group that provides input for a five-star rating scale.
Example
Pizza Crust
Regular crust
Deep dish
Thin crust
Pizza Delivery
Pickup
Home Delivery
Dine in
Accessibility Features
- Uses CSS attribute selectors for synchronizing
aria-checked
state with the visual state indicator. -
Uses CSS
:hover
and:focus
pseudo-classes for styling visual keyboard focus and hover.- The focus indicator encompasses both the radio button and label, making it easier to perceive which option is being chosen.
- Hover changes background of both the radio button and label, making it easier to perceive that clicking either the label or button will activate the radio button.
- The cursor is changed to a pointer when hovering over the radio button to help people with visual impairments identify it as an interactive element.
- Because transparent borders are visible on some systems with high contrast enabled, only the focused element has a visible border. When focusable elements are not focused, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
-
To ensure the inline SVG radio button graphics in the CSS file have sufficient contrast with the background when high contrast settings change the color of text content, CSS
forced-color-adjust
is set toauto
on thesvg
graphics. This causes the colors of thestroke
andfill
of the circle elements to be overridden by the high contrast color setting. To make the background of thecircle
elements match the high contrast background color, thefill-opacity
attribute of the outercircle
is set to zero and thestroke-opacity
attribute of the innercircle
is set to zero. Ifforced-color-adjust
were not used to override the colors specified for thestroke
andfill
properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the radio circle elements and the background or even make them invisible if their color matched the high contrast mode background.
Note: The explicit setting offorced-color-adjust
is necessary because some browsers do not useauto
as the default value for SVG graphics.
Keyboard Support
Key | Function |
---|---|
Tab |
|
Space |
|
Down arrow Right arrow |
|
Up arrow Left arrow |
|
Role, Property, State, and Tabindex Attributes
Role | Attributes | Element | Usage |
---|---|---|---|
radiogroup |
div |
|
|
aria-labelledby="[IDREF]" |
div |
Refers to the element that contains the label of the radio group. | |
radio |
div |
|
|
tabindex="-1" |
div |
|
|
tabindex="0" |
div |
|
|
aria-checked="false" |
div |
|
|
aria-checked="true" |
div |
|
JavaScript and CSS Source Code
HTML Source Code
To copy the following HTML code, please open it in CodePen.