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

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

Rule ID:: label-group-radio-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 Examples:

Using <fieldset> and <legend>:

<fieldset>
  <legend>Preferred contact method</legend>
  <label for="email">Email</label>
  <input type="radio" id="email" name="contact">
  <label for="phone">Phone</label>
  <input type="radio" id="phone" name="contact">
</fieldset>

Using id, role, and aria-labelledby:

<p id="contact-label">Preferred contact method</p>
<div role="group" aria-labelledby="contact-label">
  <label for="email">Email</label>
  <input type="radio" id="email" name="contact">
  <label for="phone">Phone</label>
  <input type="radio" id="phone" name="contact">
</div>

Failure Example:

Fake grouping:

The HTML:

<div class="group1">
  <span><strong>What is your preferred method of contact?</strong></span>
  <div>
    <input type="radio" name="contact" value="email" id="email9017">
    <label for="email9017">Email</label>
    <br>
    <input type="radio" name="contact" value="phone" id="phone9017">
    <label for="phone9017">Phone</label>
    <br>
    <input type="radio" name="contact" value="mail" id="mail9017">
    <label for="mail9017">Mail</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.