Radio Group
This page contains the inaccessible version of the component including the description of issues, additional considerations, and also the more accessible version of the component for comparison.
(future video slot)
Inaccessible Version
Issues
Expand each issue to see the user impact.
Form instructions are not associated with radio buttons.
Users of assistive technologies, such as screen readers, navigate forms mostly by tabbing. When they focus on the radio button, they would miss the form instructions saying "Please select your preferred contact method", because it is not associated with the inputs in code, for instance by using the <fieldset> and <legend> elements.
If you do not like the default fieldset and legend border styling, you can easily disable or override it in CSS.
Radio buttons are missing a connection to labels.
When users of assistive technologies, such as screen readers, are navigating on the radio buttons, the screen reader basically announces just "radio button" without any information about its label. The users then do not know what they are selecting.
Radio buttons in the group have different names.
A radio group is defined by giving each of the radio buttons in the group the same name. When submitting the form with a radio group, the submission will not contain multiple radio buttons, but just one with the selected value. This is more of an implementation issue.
There is not enough contrast between the text and the background colors.
Users with moderately low vision cannot read the text because they do not see it.
Missing keyboard support.
To make the component accessible and convenient to use for keyboard users, the following key support should be added:
TabandShift + Tab- move focus into and out of the radio groupSpace- check the focused radio button if it is not already checkedRight ArrowandDown Arrow- move focus to the next radio button in the group, unchecking the previously focused button, and checking the newly focused button. If the focus is on the last button, it moves to the first button.Left ArrowandUp Arrow- move focus to the previous radio button in the group, unchecking the previously focused button, and checking the newly focused button. If the focus is on the first button, it moves to the last button.Additionally, submit the form with
Enter
Radio buttons are hard to select by mouse or touch.
Sighted mouse or touch users can have a hard time selecting the small radio button. To increase the interactive area, the radio button can be associated with its label by introducing the for="input-id" attribute on the label, and the id="input-id" attribute on the input, which also makes the label interactive, and users can click/touch it in order to select the radio button. It would be also good to add some padding for the radio button so even the little circle has a bigger interactive area.
Consider implementing a hover effect.
It is easier for sighted mouse users to perceive that radio buttons with labels are interactive when the user interface reacts to the hover effect. Changing the background color or border is usually a good indicator.
The submit button has an incorrect type.
Without the JavaScript validation, a button with the type="button" behaves as a standard button and would not trigger the form submission. Instead, we should set type="submit", which is a good practice even when the form submission is controlled by JavaScript because it is a clear button definition.
Considerations
The usage of certain techniques depends on the circumstances. Expand each consideration to learn more.
Consider adding the default value.
It is fairly uncommon to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually good to have one checked by default.
Consider wrapping the radio group with a form tag.
If the form collects user input, it should be wrapped in the form element to group related fields, and also for better semantics and SEO.