Form fields have multiple labels

Form fields have multiple labels

Appears in: Accessibility audits

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

<label> elements are a common way to assign names to 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