WAI-ARIA: Role=Radio
A checkable input in a group of elements with the same role, only one of which can be checked at a time.
Description
A checkable input in a group of elements with the same role, only one of which can be checked at a time.
Authors SHOULD ensure that elements with role radio are explicitly grouped in order to indicate which ones affect the same value. This is achieved by enclosing the radio elements in an element with role radiogroup. If it is not possible to make the radio buttons DOM children of the radiogroup, authors SHOULD use the aria-owns attribute on the radiogroup element to indicate the relationship to its children.
Role=Radio Example
HTML Example
<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>Characteristics
Superclass Role
- input
Subclass Roles
- menuitemradio
Related Concepts
- HTML input[type=”radio”]
Required States and Properties
- aria-checked
Supported States and Properties
- aria-posinset
- aria-setsize
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- contents
- author
Accessible Name Required
- True
Children Presentational
- True
Implicit Value for Role
- Default for aria-checked is false.
Semantic HTML
Use the HTML <radio> tag.
<radiogroup>
<radio id=”orange” label=”Red”/>
<radio id=”violet” label=”Green” selected=”true”/>
<radio id=”yellow” label=”Blue”/>
</radiogroup>
Reference
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=radio.
