Ensure Form Field Does Not Have Multiple Label Elements
Blind
Low vision
Hearing
Mobility
WCAG 2.2 Level A
Written and researched for humans by humans
Casandra Visser
Author
Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments:
0
Web accessibility requirements state that form fields should not have multiple labels.
Why It Matters
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.
Fixing the Issue
Ensure that only one label is assigned to a form field.
Good Code Example
The form-field-multiple-labels rule contains five markup patterns that pass analysis:
Code example
<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 Bad Code Example
The form-field-multiple-labels rule contains nine markup patterns that fail analysis:
Code example
<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