Theradiogroup role is a group ofradio buttons.

Description

Radio groups are collections describing a set of relatedradio options. Aradiogroup is a type ofselect list that can only have a single entry, orradio, checked at any one time.

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 samename. 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 aradiogroup 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, customradio 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 theiraria-checked attribute set totrue, the previously checked item becomes unchecked, with itsaria-checked attribute becomingfalse. Thearia-checked attribute is set on the associatedradio roles, not on theradiogroup itself.

Someradiogroup implementations initialize the set with all buttons in the unchecked state. Once aradio in aradiogroup is checked, it is generally not possible to return to an all-unchecked state.

Theradiogroup must have an accessible name either by a visible label referenced byaria-labelledby or has a label specified witharia-label. If elements provide additional information about the radio group, those elements are referenced by theradiogroup element with thearia-describedby property.

Associated WAI-ARIA roles, states, and properties

radio role

One of a group of checkable buttons, in aradiogroup, where no more than one of the buttons can be checked at a time.

aria-labelledby /aria-label

Theradiogroup must have an accessible name either by a visible label referenced byaria-labelledby or has a label specified witharia-label.

aria-describedby

Reference to elements providing additional information about theradiogroup

aria-required

Indicates that oneradio within the group must havearia-checked="true" set before the form may be submitted. The required state is specified on theradiogroup element rather than one of theradio elements, unlike when using HTML radio buttons where therequired attribute is set directly on one or more radio<input> elements.

aria-errormessage

Identifies the element that provides an error message for theradiogroup, if there is an error. That message should be hidden while not relevant.

Keyboard interactions

Forradio buttons in aradiogroup that is NOT in atoolbar, the following keyboard interactions must be supported:

Tab andShift + Tab

Move focus into and out of theradiogroup. When focus moves into aradiogroup, 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.

Space

Checks the focused radio button if it is not already checked.

Right Arrow andDown 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 andUp 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 aradiogroup 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 aradiogroup in atoolbar with arrow keys, the button that is checked does not change. Rather, when inside atoolbar, theSpace andEnter keys check the focusedradio button if it is not already checked, withTab moving focus into and out of thetoolbar.

Required JavaScript features

User interactions forradiogroups 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 through a group of radio button keeps you in the group, moving focus to the first radio button when theRight Arrow orDown Arrow is released when focus was on the last radio in the group, and moving to the last radio if theLeft Arrow orUp Arrow is released if focus was on the first radio. Managing rovingtabindex is one method to manage arrow key events.

Required CSS features

Use the[aria-checked="true"]attribute selector to style the checked state of checked radio buttons.

Use CSS:hover and: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.

Examples

The basic set up for aradiogroup using non-semantic ARIA roles instead of semantic HTML is as follows:

<div role="radiogroup" aria-labelledby="question">  <div>Which is the best color?</div>  <div>    <p>      <span               tabindex="0"        role="radio"        aria-checked="false"        aria-labelledby="purple"></span>      <span>Purple</span>    </p>    <p>      <span               tabindex="-1"        role="radio"        aria-checked="false"        aria-labelledby="aubergine"></span>      <span>Aubergine</span>    </p>    <p>      <span               tabindex="-1"        role="radio"        aria-checked="false"        aria-labelledby="magenta"></span>      <span>Magenta</span>    </p>    <p>      <span               tabindex="-1"        role="radio"        aria-checked="false"        aria-labelledby="all"></span>      <span>All of the above</span>    </p>  </div></div>

This could have been written using semantic HTML, which requires no CSS or #"colorOption" type="radio" /> <label for="purple">Purple</label> </p> <p> <input name="colorOption" type="radio" /> <label for="aubergine">Aubergine</label> </p> <p> <input name="colorOption" type="radio" /> <label for="magenta">Magenta</label> </p> <p> <input name="colorOption" type="radio" /> <label for="all">All of the above</label> </p></fieldset>