Checkbox inputs with the same name attribute value must be part of a 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 and that that group designation is consistent

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-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.

Compliance Data & Impact

User Impact: Critical
Disabilities Affected:
  • Blindness
  • Deafblindness
  • Mobility/Dexterity
Severity: Critical
Issue Type:
  • Deque Best Practice
WCAG Success Criteria:
  • Not applicable
Section 508 Guidelines:
  • Not applicable

How to Fix the Problem

Ensure all related checkboxes are grouped together using one of the following methods:

  • <fieldset> and <legend> tags
  • ARIA groups role="group" and aria-label or aria-labelledby
  • aria-labelledby that 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>. The <legend> acts as a label for the group as a whole.

Example

<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>
</fieldset>
Select one or more colors

Note:

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.

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
Relevant Custom Widget Type(s):
  • Checkbox/Checkbox Group (ARIA)
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: checkboxgroup