ARIA: radiogroup role
radiogroup role is a group of
When using HTML's native input radio button,
<input type="radio">, the radio buttons are grouped when each of input radio buttons in the group is given the same
name. Once a group of same-named input radio buttons is established, selecting any input radio button in that group automatically deselects any currently-selected input radio button in the same group. While this will associate the radio buttons together, to expose a grouping of radio buttons as a
radiogroup explicitly set the ARIA role.
It is recommended to create radio groups by using same-named HTML input radio buttons, but, if you must use ARIA roles and attributes instead of semantic HTML form controls, custom
radio buttons can and should act like native HTML radio input buttons.
When using non-semantic elements as radio buttons, you must ensure your users can only select one radio button from the group at a time. When one item in the group is checked, having their
aria-checked attribute set to
true, the previously checked item becomes unchecked, with its
aria-checked attribute becoming
aria-checked attribute is set on the associated
radio roles, not on the
radiogroup implementations initialize the set with all buttons in the unchecked state. Once a
radio in a
radiogroup is checked, it is generally not possible to return to an all-unchecked state.
radiogroup must have an accessible name either by a visible label referenced by
aria-labelledby or has a label specified with
aria-label. If elements provide additional information about the radio group, those elements are referenced by the
radiogroup element with the
One of a group of checkable buttons, in a
radiogroup, where no more than one of the buttons can be checked at a time.
radiogroupmust have an accessible name either by a visible label referenced by
aria-labelledbyor has a label specified with
Reference to elements providing additional information about the
Indicates that one
radiowithin the group must have
aria-checked="true"set before the form may be submitted. The required state is specified on the
radiogroupelement rather than one of the
radioelements, unlike when using HTML radio buttons where the
requiredattribute is set directly on one or more radio
Identifies the element that provides an error message for the
radiogroup, if there is an error. That message should be hidden while not relevant.
radio buttons in a
radiogroup that is NOT in a
toolbar, the following keyboard interactions must be supported:
- Tab and Shift + Tab
Move focus into and out of the
radiogroup. When focus moves into a
radiogroup, if a radio button is checked, focus is set on the checked button. If none of the radio buttons are checked, focus is set on the first radio button in the group.
Checks the focused radio button if it is not already checked.
- Right Arrow and Down Arrow
Moves focus to the next radio button in the group, unchecking the previously focused button, and checking the newly focused button. If focus is on the last button, focus moves to the first button.
- Left Arrow and Up Arrow
Moves focus to the previous radio button in the group, unchecking the previously focused button, and checking the newly focused button. If focus is on the first button, focus moves to the last button.
Arrow keys are used to navigate among elements of a toolbar. When a
radiogroup is nested inside a toolbar, users need to be able to navigate among all toolbar elements, including the radio buttons, without changing which radio button is checked. So, when navigating through a
radiogroup in a
toolbar with arrow keys, the button that is checked does not change. Rather, when inside a
toolbar, the Space and Enter keys check the focused
radio button if it is not already checked, with Tab moving focus into and out of the
User interactions for
radiogroups must replicate the user interaction of a user entering into a group of same-named HTML radio buttons. Keyboard events for tabs, space, and arrow keys must be captured. Click events on both the radio elements and their associated labels must also be captured. Additionally, focus must be managed.
While generally moving off an a focused element brings you to the next focusable element in the DOM order, using the arrow keys to navigate thru a group of radio button keeps you in the group, moving focus to the first radio button when the Right Arrow or Down Arrow is released when focus was on the last radio in the group, and moving to the last radio if the Left Arrow or Up Arrow is released if focus was on the first radio. Managing roving
tabindex is one method to manage arrow key events.
[aria-checked="true"] attribute selector to style the checked state of checked radio buttons.
:focus pseudo-classes for styling visual keyboard focus and hover. The focus and hover effect should encompass both the radio button and label to make it easier to perceive which option is being chosen and to indicate that clicking either the label or button will activate the radio button.
The basic set up for a
radiogroup using non-semantic ARIA roles instead of semantic HTML is as follows:
<div role="radiogroup" aria-labelledby="question"> <div id="question">Which is the best color?</div> <div id="radioGroup"> <p> <span id="colorOption_0" tabindex="0" role="radio" aria-checked="false" aria-labelledby="purple"></span> <span id="purple">Purple</span> </p> <p> <span id="colorOption_1" tabindex="-1" role="radio" aria-checked="false" aria-labelledby="aubergine"></span> <span id="aubergine">Aubergine</span> </p> <p> <span id="colorOption_2" tabindex="-1" role="radio" aria-checked="false" aria-labelledby="magenta"></span> <span id="magenta">Magenta</span> </p> <p> <span id="colorOption_3" tabindex="-1" role="radio" aria-checked="false" aria-labelledby="all"></span> <span id="all">All of the above</span> </p> </div> </div>
<fieldset> <legend>Which is the best color?</legend> <p> <input name="colorOption" type="radio" id="purple" /> <label for="purple">Purple</label> </p> <p> <input name="colorOption" type="radio" id="aubergine" /> <label for="aubergine">Aubergine</label> </p> <p> <input name="colorOption" type="radio" id="magenta" /> <label for="magenta">Magenta</label> </p> <p> <input name="colorOption" type="radio" id="all" /> <label for="all">All of the above</label> </p> </fieldset>
<fieldset> example, while
role="radiogroup" is not necessary, to have this grouping explicitly announced as
radiogroup, include the ARIA role.
|Accessible Rich Internet Applications (WAI-ARIA) |
|ARIA Authoring Practices |