WAI-ARIA: Role=Radiogroup • Digital A11y

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).

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)