Checkbox inputs with the same name attribute value must be part of a group
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
Disabilities Affected
- Blind
- Deafblind
- Mobility
Standard(s)
- Deque Best Practice
How to Fix the Problem
Ensure all related checkboxes are grouped together using one of the following methods:
fieldsetandlegendtags-
ARIA groups
role="group"andaria-labeloraria-labelledby -
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.
Note:
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.
Example
<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 it Matters
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-label and 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.
Rule Description
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.
Resources
Deque University Course Pages (subscription required)
No related course information available.
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: