A group of radio buttons.
Description
A group of radio buttons.
A radiogroup is a type of select list that can only have a single entry checked at any one time. Authors SHOULD enforce that only one radio button in a group can be checked at the same time. When one item in the group is checked, the previously checked item becomes unchecked (its aria-checked attribute becomes false).
Screen Reader Support For Role=RadioGroup
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST convey its role | supported | supported | supported | supported | supported | supported | partial | supported | none | none | supported |
| MUST convey the group name if it has a group name | partial | partial | partial | supported | supported | supported | supported | supported | none | none | supported |
| MUST convey the boundaries of the group | supported | supported | supported | supported | partial | partial | partial | partial | none | none | supported |
Example
HTML Example 1
<div role=”radiogroup”
aria-labelledby=”gdesc1″
>
<h3>
Pizza Crust
</h3>
<div role=”radio”
aria-checked=”false”
tabindex=”0″>
Regular crust
</div>
<div role=”radio”
aria-checked=”false”
tabindex=”-1″>
Deep dish
</div>
<div role=”radio”
aria-checked=”false”
tabindex=”-1″>
Thin crust
</div>
</div>
HTML Example 2
<div id=”radio_label”>My radio label</div>
<ul role=”radiogroup” aria-labelledby=”radio_label”>
<li role=”radio”>Item #1</li>
<li role=”radio”>Item #2</li>
<li role=”radio”>Item #3</li>
</ul>
Characteristics
Superclass Role
- select
Related Concepts
- list
Required Owned Elements
- radio
Supported States and Properties
- aria-readonly
- aria-required
Inherited States and Properties
- aria-activedescendant
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-orientation
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Accessible Name Required
- True
Semantic HTML
No HTML element equivalent.
Reference
- W3C (opens new window)
- A11Y Support