The group label is not associated with its checkboxes. The group-level label helps to completely convey the purpose of individual checkboxes in the group.

Link to The group label is not associated with its checkboxes. The group-level label helps to completely convey the purpose of individual checkboxes in the group. copied to clipboard

Rule ID:: label-group-checkboxes-not-associated
User Impact:: Serious
WCAG :: 1.3.1.d

Rule

Group labels MUST be programmatically-associated with the group if the individual labels for each element in the group are insufficient on their own.

Background

People who are blind cannot use the visual layout of a group of related form elements and their shared group label — such as a question with a set of checkbox answers — to determine the relationship between the form fields and the group label. In order to understand the relationship of the form fields, their individual labels, and their group label, the relationships must be expressed semantically. When grouped form elements and their group label are expressed semantically, a screen reader user can put focus on a form element and the screen reader will read the form element label and element type as well as the group label.

The requirements here are threefold: first, the related form fields must be programmatically grouped; second, they must be labelled; and third, their label must be programmatically associated with the group.

There are two approaches to fixing this issue. The first, preferred approach uses native HTML elements <fieldset> and <legend> to programmatically associate the grouped form elements with their group label.

The second uses ARIA role="group" and aria-labelledby. This should only be used when the first approach is not possible. This usually occurs when the <legend> element cannot be the direct child of its <fieldset> element.

Code Examples

Good Example:

Using <fieldset> and <legend>:

<fieldset>
  <legend>Please choose from the following desserts</legend>
  <input type="checkbox" value="cheese" id="cheese1">
  <label for="cheese1">Cheese plate</label>
  <input type="checkbox" value="torte" id="torte1">
  <label for="torte1">Chocolate torte</label>
  <input type="checkbox" value="fruit" id="fruit1">
  <label for="fruit1">Fresh fruit and ice cream</label>
</fieldset>

Using id, role, and aria-labelledby:

<p id="desserts-label">Please choose from the following desserts</p>
<div role="group" aria-labelledby="desserts-label">
  <input type="checkbox" value="cheese" id="cheese1">
  <label for="cheese1">Cheese plate</label>
  <input type="checkbox" value="torte" id="torte1">
  <label for="torte1">Chocolate torte</label>
  <input type="checkbox" value="fruit" id="fruit1">
  <label for="fruit1">Fresh fruit and ice cream</label>
</div>

Failure Example:

Role="group" but no programmatically associated label:

<p>Please choose from the following desserts</p>
<div role="group">
  <input type="checkbox" value="cheese" id="cheese1">
  <label for="cheese1">Cheese plate</label>
  <input type="checkbox" value="torte" id="torte1">
  <label for="torte1">Chocolate torte</label>
  <input type="checkbox" value="fruit" id="fruit1">
  <label for="fruit1">Fresh fruit and ice cream</label>
</div>

Programmatically associated label but no role="group"

<p id="desserts-label">Please choose from the following desserts</p>
<div aria-labelledby="desserts-label">
  <input type="checkbox" value="cheese" id="cheese1">
  <label for="cheese1">Cheese plate</label>
  <input type="checkbox" value="torte" id="torte1">
  <label for="torte1">Chocolate torte</label>
  <input type="checkbox" value="fruit" id="fruit1">
  <label for="fruit1">Fresh fruit and ice cream</label>
</div>

Fake grouping:

The HTML:

<div class="group1">
  <span>Please choose from the following desserts:</span>
  <div>
    <input type="checkbox" value="Cheese" id="cheese1">
    <label for="cheese1">Cheese Plate</label>
    <br>
    <input type="checkbox" value="torte" id="torte1">
    <label for="torte1">Chocolate Torte</label>
    <br>
    <input type="checkbox" value="fruit" id="fruit1">
    <label for="fruit1">Fresh Fruit and Ice Cream</label>
  </div>
</div>

The CSS:

.group1 {
  border: 1px solid grey;
  border-radius: 10px;
  padding: 10px;
}

How To Fix

Fix this issue by doing one of the following:

Using <fieldset> and <legend> (preferred):

Enclose the group label in a <legend> element.
AND
Enclose the <legend> element and all of the related form fields in a <fieldset> element.

Using ARIA

Enclose the group label in a container such as a <div> or a <p> and give it a unique id attribute value.
AND
Enclose the related form controls in a container such as a <div>
AND
Apply the role="group" and aria-labelledby attributes to the container.
AND
Make the value of the aria-labelledby attribute match the value of the id attribute on the group label container.

Don't do this:

Use CSS to create visual groups with no programmatic association
Rely on the proximity of labels to their form elements to convey their relationship.