Checkbox inputs with the same name attribute value must be part of a group
How to Fix the Problem
Ensure all related checkboxes are grouped together using one of the following methods:
- ARIA groups
aria-labelledbythat points to the same element for every checkbox in the group
Associate the labels for checkboxes by assigning an id to the
input element and referencing that ID in the
label element. Also group checkboxes with the
fieldset and appropriate
legend elements. The
legend element acts as a label for the group as a whole.
VoiceOver for macOS currently has a bug in which the
legend element content is not read when the fields within the
fieldset element receive focus. Older versions of VoiceOver did not have this bug; we assume this is a temporary glitch that Apple will fix soon.
<fieldset> <legend>Select one or more colors</legend> <input type="checkbox" name="r" id="r" value="red"> <label for="r">Red</label> <input type="checkbox" name="b" id="b" value="blue"> <label for="b">Blue</label> <input type="checkbox" name="y" id="y" value="yellow"> <label for="y">Yellow</label></fieldset>
Why this is Important
It is often easy for sighted users to understand the purpose of a group of checkboxes based on context. This is not, however, always the case for screen reader users. Grouping checkboxes together programmatically under a clear, descriptive name eliminates the ambiguity screen reader users experience to create a more accessible product.
One limitation of the
label tag is that it can be associated with only one form element. If circumstances require a more complex labeling structure, the
label tag is insufficient. This is where
aria-labelledby come in. Grouping related form input elements such as checkboxes by placing a box around them visually does not group them programmatically so that screen readers can read a group label when screen reader users arrive at the group.
All checkbox groups must have either a proper
aria-labelledby value for all group members, or a proper containing
fieldset or ARIA group to associate them programmatically for screen reader users.
The Algorithm (in simple terms)
Ensures that all checkbox groups have a
group element and that that the group designation is consistent.