Checkbox inputs with the same name attribute value must be part of a group
aria-labelledbyvalue 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
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.
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> tag and referencing that
id in the
<label> tag. Also group the checkboxes with the
<fieldset> tag and appropriate
<legend> acts as a label for the group as a whole.
<fieldset> <legend>Select one or more colors</legend> <input type="checkbox" name="r" id="r" value="red"> <label for="r">Red</label><br> <input type="checkbox" name="b" id="b" value="blue"> <label for="b">Blue</label><br> <input type="checkbox" name="y" id="y" value="yellow"> <label for="y">Yellow</label>
VoiceOver for Mac OSX currently has a bug in which the
<legend> text is not read when the fields within the
<fieldset> receive focus. Older versions of VoiceOver did not have this bug, so we assume this is a temporary glitch that Apple will fix relatively soon.
- HTML 4