Input (radio)

Referred HTML Tags

<input type="radio" />, <fieldset>, <legend>

Context

It would be wrong to refer to the "radio button" as a single element, since radio buttons inherently work as part of a group, making their accessibility dependent on the accessibility of the entire buttons group. Therefore, we will address the accessibility requirements of a radio group as a whole, as well as the accessibility requirements of each individual button. Let’s start by examining the group that puts each radio button in its context. Unlike checkboxes that can work individually or as part of a group that allows multiple selections, radio buttons must be part of a button group that allows only a single selection. Radio buttons are grouped by the value of their "name" attribute. However, while setting the same "name" value makes radio buttons operable as a group screen, readers will still not announce them as a group. For screen readers to read the group name, we must wrap each group of radio buttons with a grouping element to define their context. To group form elements, we can use the <fieldset> tag, which indicates to screen readers to inform the user that he is dealing with a group of items. However, the user should also understand the group's context, so each group should also have a name that can be read and announced by screen readers. You can set a name to <fieldset> by either using the <legend> tag or by using one of the WAI-ARIA's labeling attributes (e.g., aria-label, aria-labelledby).

1<fieldset>
2    <legend>Choose currency:</legend>
3
4    <label for="USD">US Dollar</label>
5    <input id="USD" type="radio" name="currency" value="USD" />
6    <label for="EUR">Euro</label>
7    <input id="EUR" type="radio" name="currency" value="EUR" />
8    <label for="GBP">British Pound</label>
9    <input id="GBP" type="radio" name="currency" value="GBP" />
10
11</fieldset>

Accessible name

Any interactable HTML element requires an accessible name. This is the name that's announced or displayed by assistive technologies. Input elements traditionally get their accessible name from a dedicated labeling element (e.g. <label>) that’s linked to the input element by its id name.

1<label for="USD">US Dollar</label>
2<input id="USD" type="radio" name="currency" />

However, if you don’t want to use a visual label or are constrained from using the <label> element, input elements can get their accessible name from labeling attributes as well (e.g. aria-label). Note that you should not depend on a placeholder attribute as an accessible name since not all screen readers read it when the input field is not empty. learn more about accessible names here

Visual focus indicator

Any interactable HTML element must have a discernible focus indication. People who use only the keyboard or other sequential navigation device must get an indication of the currently active item. Unlike mouse users who point and click directly on elements, or screen reader users who receive a voice prompt about the active element, keyboard users depend on a visual indication that marks the active element. Most user agents have a default focus indicator. The author's responsibility is to provide an alternative focus indication if the default one is overriding. Note that focus indication must not be uttered only by a change of color as visually impaired and color blind people may find it difficult to distinguish. The visual focus indicator is particularly important for text inputs as it signals the user when he can type into the input field.

Equivalent WAI-ARIA Role

role="radio", role="radiogroup"

Required properties/attributes/context

Radiogroup

The role=“radiogroup” is equivalent to the <fieldset> tag in this context.

Ensure that the “radiogroup” element contains at least two elements with a role=”radio” attribute.
Ensure that the group has an accessible name. Radio groups can be labeled by a WAI-ARIA labeling attribute or implicitly be labeled by a heading element within it.

Radio

Ensure that the element is focusable
Ensure that the element has an accessible name
Ensure that the element is contained within a role=“radiogroup” element
The radio element must have an aria-checked attribute that accepts true/false values. If an aria-checked is not set, the element will be registered to the accessibility tree with a default value of “false”
On a “disabeled” state:
- Ensure that the element is not focusable
- Ensure that the element has an aria-disabeled=”true” attribute.

Semantics Enhancements

These are WAI-ARIA attributes and patterns that support common specific use cases of the element.

role=”menuitemradio”

The "menuitemradio" can act as a menu item in a single selection menu. Despite all the attributes required from a normal radio button, the "menuitemradio" role can be contained (as direct children) only within elements with a role=”menu”, role=”menubar” or role=”group” attribute.