Skip to content
Learn Measure Blog Case studies About
On this page
  • How the Lighthouse multiple label audit fails
  • How to remove duplicate form labels
  • Resources

Form fields have multiple labels

Oct 17, 2019
Appears in: Accessibility audits
On this page
  • How the Lighthouse multiple label audit fails
  • How to remove duplicate form labels
  • Resources

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 #

  • Source code for Form fields have multiple labels audit
  • Form fields do not have duplicate labels (Deque University)
Last updated: Oct 17, 2019 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.