Learn Measure Blog About

Form fields have multiple labels

To be announced properly by assistive technologies, both native HTML controls and custom ARIA controls must have accessible names that convey their purpose.

<label> elements are a common way to assign names to native controls. If you unintentionally associate multiple labels with a single control, you'll create inconsistent behavior across browsers and assistive technologies: some will read the first label, some will read the last label, and others will read both labels.

How the Lighthouse multiple label audit fails

Lighthouse flags form elements that have more than one label:

Lighthouse audit showing form elements with multiple labels

There are several common scenarios that cause this audit to fail:

  • Explicitly associating more than one <label> element with a form element using the for attribute. For example:

    <label for="checkbox1">Label one</label>
    <label for="checkbox1">Label two</label>
    <input type="checkbox" id="checkbox1" />
  • Implicitly associating one <label> element with a form element and explicitly associating another using the for attribute. For example:

    <label for="checkbox1">Label one</label>
    <label>Label two
    <input type="checkbox" id="checkbox1" />
    </label>
  • Associating one <label> element with a form element and associating another element using the aria-labelledby attribute. For example:

    <label for="checkbox1">Label one</label>
    <p id="checkbox1_label">Label two</p>
    <input type="checkbox" id="checkbox1" aria-labelledby="checkbox1_label" />
  • Having nested <label> elements. For example:

    <label>Label one
    <label>Label two
    <input type="checkbox" id="checkbox1" />
    </label>
    </label>

The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.

How to remove duplicate form labels

Make sure that each form element on your page has no more than one label. Labels can be assigned in three ways:

  • Implicitly, by making the <label> element a parent of the form element:

    <label>Label for checkbox
    <input type="checkbox" id="checkbox1" />
    </label>
  • Explicitly, by associating a <label> element with the form element using the for attribute:

    <label for="checkbox1">Label for checkbox</label>
    <input type="checkbox" id="checkbox1" />
  • Using the aria-labelledby attribute to associate the form element with a separate element using its ID:

    <p id="checkbox1_label">Label for checkbox</p>
    <input type="checkbox" id="checkbox1" aria-labelledby="checkbox1_label" />

Verify that you're using only one of these techniques for each form element.

Resources

Last updated: Improve article