Form fields must not have multiple labels
Estimated effort: about 5 minutes.
Each form field should have exactly one label describing it. When a field has two or more label elements pointing to it, screen readers may read both, read only one, or read them in an unpredictable order, which confuses visitors filling out the form.
How to fix it
- Locate the input, select, or textarea element that has more than one associated <label> element pointing to its id.
- Decide which label text is correct and keep only that one <label for="..."> element.
- Remove or rewrite the duplicate label so it no longer references the same field id, or delete it entirely if it is redundant.
- If two pieces of text both genuinely describe the field (e.g. a group heading plus a field-specific label), combine them into a single aria-labelledby attribute referencing both element ids, rather than using two separate <label> elements.
- Re-check that the field has exactly one label association after the fix.
Before and after
Before
<label for="fname">Hi</label>
<label for="fname">First Name</label>
<input type="text" id="fname">
After
<label for="fname">First Name</label>
<input type="text" id="fname">