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:

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>

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)