Form fields have multiple labels

17 Oct 2019

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)