Avoid assigning multiple labels to a single form field
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Having multiple labels for one field creates ambiguity — screen readers may read only one or merge them incorrectly, confusing users about the purpose of the field.
How to fix this issue
Ensure that each form input has a single, clear accessible name. If multiple descriptions are needed, use `aria-describedby` for supplementary text.
Developer guidance
Audit your form generator or design system for duplicate `<label>` elements per field. Use descriptive hints instead of multiple labels.
Code examples
Incorrect Implementation
<label for='email'>Email</label><label for='email'>Your email</label><input id='email'>Correct Implementation
<label for='email'>Email address</label><input id='email' aria-describedby='hint'><small id='hint'>We'll never share your email.</small>
Trusted by organizations across Europe working toward WCAG and EAA conformance