No visual group label is present and the purpose of this group is not clear without a visual label.

Link to No visual group label is present and the purpose of this group is not clear without a visual label. copied to clipboard
Rule ID:
label-group-not-present
User Impact:
Serious
WCAG:
3.3.2.a

Rule

Group labels MUST be visible

Background

Filling out forms correctly can be one of the more time consuming and frustrating online user experiences, and it can be even more challenging for people with disabilities. Well-designed labels and instructions provide enough information so people can fill out forms without undue confusion or errors. Labels and instructions should:

  1. be visible, clear, accurate, and informative,
  2. be programmatically associated with their form fields.
  3. disclose any constraints such as required data formats or ranges, and
  4. identify required fields.

To fix this issue, provide a visible label for the group of form fields, and ensure that they are programmatically associated.

Code Examples

Good Example:

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<
<h4>Using id, role, and aria-labelledby:</h4>
  <pre><code>&lt;p <span class="highlight">id="contact-label"</span>&gt;Preferred contact method&lt;p&gt;

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

<legend> is visually hidden:

<form class="labelformat1">
  <fieldset class="fieldsetformat9968">
    <legend class="visually-hidden">Contact Information</legend>
    <p>
      <label for="address9968">Address: </label>
      <input type="text" id="address9968">
    </p>
    <p>
      <label for="city9968">City: </label>
      <input type="text" id="city9968">
    </p>
    <p>
      <label for="state9968">State: </label>
      <input type="text" id="state9968">
    </p>
    <p>
      <label for="zip9968">Zip: </label>
      <input type="text" id="zip9968">
    </p>
  </fieldset>
</form>

How To Fix

Fix this issue by doing one of the following:

  • Provide a visible group label for the set of form fields using <fieldset> and <legend>.
  • Provide a visible group label for the set of form fields using role="group" and aria-labelledby.

Don't do this:

  • Hide legend text using CSS so that it is only useful for screen readers.
  • Rely on the page layout to associate the label with the form field.

References