What This Rule Checks
Each form field must be associated with only one visible label to ensure proper accessibility. Multiple labels on the same form field can confuse assistive technologies like screen readers, leading to a poor user experience for those relying on such tools.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Multiple labels for a single form control produce inconsistent behavior across screen readers. Some may announce only the first label, others may announce both. This unpredictability confuses users and can cause form submission errors.
How to Fix
To ensure form fields are properly labeled and accessible for users relying on assistive technologies, follow these steps:
Ensure Each Form Control Has a Single, Clear Label:
Each form element (<input>, <textarea>, or <select>) must be associated with only one visible label. Multiple labels for a single form control can confuse assistive technologies, leading to accessibility issues.
Avoid Multiple Labels for the Same Control:
Ensure each form element has a unique and well-defined label. Using multiple <label> elements for the same control can cause confusion and interfere with screen reader navigation.
Prevent Label Nesting:
Do not nest labels within one another. Labels should directly describe the form control they are linked to, and nesting them can break that relationship.
Use ARIA Attributes Where Necessary:
For custom form controls, use aria-labelledby or title attributes to supplement the label where needed. However, ensure these attributes do not conflict with visible labels.
Code Examples
<!-- Two labels pointing to same input -->
<label for="email">Email</label>
<label for="email">Your email address</label>
<input type="email" id="email">
Copy
<!-- Single descriptive label -->
<label for="email">Email address</label>
<input type="email" id="email">
Copy
<!-- Or use aria-describedby for supplemental text -->
<label for="email">Email</label>
<input
type="email"
id="email"
aria-describedby="email-hint">
<span id="email-hint">
We will never share your email.
</span>
Copy
Common Mistakes to Avoid
- Using multiple <label> elements for one input instead of combining text into one label.
- Adding both a wrapping label and a for-attribute label to the same input.
- Not realizing that multiple labels cause inconsistent announcements across screen readers.
Tip: Form accessibility is one of the most common sources of accessibility complaints. Every form control must have a programmatically associated label that is visible and descriptive. Test every form with keyboard-only navigation.
Related WCAG Criteria
• 3.3.2: Labels or Instructions