form-field-multiple-labels
Web validation
label element.Each form control needs a single, clear label so assistive technology can determine its purpose. When more than one label element is associated with the same control, screen reader users may hear the name announced more than once or in the wrong order.
This duplication is confusing and slows down form completion. It can also make voice control harder, because the spoken name may not match what the user expects to say.
Pass Patterns
A single explicit label
The for attribute matches the control's id, creating a one-to-one association.
<label for="email">Email address</label>
<input id="email" name="email" type="email" />A single label referenced with aria-labelledby
The control points to one label element, so only one name is exposed.
<label id="pwd-label">Password</label>
<input id="pwd" name="pwd" type="password" aria-labelledby="pwd-label" />Fail Patterns
Two explicit labels on one control
Two label elements use the same for value, so the control has two names.
<label for="phone">Phone</label>
<label for="phone">Telephone number</label>
<input id="phone" name="phone" type="tel" />A wrapping label plus an explicit label
An implicit, wrapping label and a separate explicit label both name the same control.
<label>Country
<input id="country" name="country" type="text" />
</label>
<label for="country">Nation</label>WCAG techniques
Sufficient techniques
- H44: Using label elements to associate text labels with form controls
- H71: Providing a description for groups of form controls using fieldset and legend elements
- ARIA9: Using aria-labelledby to concatenate a label from several text nodes
Try It Yourself
Inspecting the browser dev-tools
- Select the control in your browser's dev tools.
- View the Name property in the Accessibility panel.
- Check how many
labelelements are associated with the control.
Expected results: Exactly one label element provides the name.
Actual results: Two or more label elements are associated with the control.
FAQ
How does this issue relate to 3.3.2 Labels or Instructions?
SC 3.3.2 requires controls to have labels or instructions that make their purpose clear. More than one associated label makes the purpose ambiguous, because the control no longer has a single, predictable name.
Why is this issue marked as Moderate?
Screen reader users may hear duplicated or conflicting names, and people using voice control may struggle to activate the field. It rarely blocks form submission, but it slows users down and reduces confidence, so the impact is moderate.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 3.3.2 Labels or Instructions (A) | Labels or instructions are provided when content requires user input. |
| EN 301 549 | 9.3.3.2 Labels or Instructions | Same as the WCAG text. |
| Section 508 | 1194.22(n) | When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. |
| 508 Trusted Tester | 1.3.1-programmatic-label, 5.C | The combination of the accessible name, accessible description, and other programmatic associations (e.g., table column and/or row associations) describes each input field and includes all relevant instructions and cues (textual and graphical). |