Form fields have multiple labels
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:
There are several common scenarios that cause this audit to fail:
Explicitly associating more than one
<label>
element with a form element using thefor
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 thefor
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 thearia-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 thefor
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)