Ensure Form Field Does Not Have Multiple Label Elements
Blind
Low vision
Hearing
Mobility
WCAG 2.1 Level A
Web accessibility requirements state that form fields should not have multiple labels.
Assigning multiple labels to the same form field can cause problems and create a confusing experience. Some assistive technologies will read the first label, some will read the last label, while others will read both.
Ensure that only one label is assigned to a form field.
The form-field-multiple-labels rule contains five markup patterns that pass analysis:
<label for="pass1">Label</label>
<input type="text" id="pass1" /><textarea id="pass2" title="Label"></textarea><label>First Name: <input type="text" id="pass3" /></label><label>Choose an option:
<select id="pass4">
<option selected="selected">Chosen</option>
<option>Not Selected</option>
</select>
</label><label>Enter your comments:
<textarea id="pass5"></textarea>
</label>
Copy
The form-field-multiple-labels rule contains nine markup patterns that fail analysis:
<label for="fail1">Hi</label>
<label for="fail1">Foo</label>
<input type="text" id="fail1" /><label for="fail2">label one</label>
<label for="fail2">label two</label>
<input type="checkbox" id="fail2" /><label for="fail3" id="l1">label one</label>
<label for="fail3">label two</label>
<input type="checkbox" id="fail3" aria-labelledby="l1" /><label for="fail4">First Name:</label>
<label>First Name:
<input type="text" id="fail4" />
</label><label for="fail5">Choose an option:</label>
<label>Choose an option:
<select id="fail5">
<option selected="selected">Chosen</option>
<option>Not Selected</option>
</select>
</label><label for="fail6">Enter your comments:</label>
<label>Enter your comments:
<textarea id="fail6"></textarea>
</label><label>Enter your comments:
<label>Enter your comments:
<textarea id="fail7"></textarea>
</label>
</label><label>Enter your comments:
<label>Enter your comments:
<label>Enter your comments:
<textarea id="fail8"></textarea>
</label>
</label>
</label><label for="fail9">Enter your comments:</label>
<label>Enter your comments:
<label>Enter your comments:
<label>Enter your comments:
<textarea id="fail9"></textarea>
</label>
</label>
</label>
Copy