Ensure every form control has an accessible label
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
Users of assistive technologies depend on labels to understand the purpose of each input field. A missing or unclear label makes it impossible for screen reader users to fill out forms accurately, increasing error risk and frustration.
How to fix this issue
Provide a visible `<label>` linked to its input using `for` and `id`. For complex controls, use `aria-labelledby` or `aria-label` to ensure an accessible name.
Developer guidance
Every `<input>`, `<select>`, and `<textarea>` should have an associated label. Use placeholders only as hints — never as a substitute for labels.
Code examples
Incorrect Implementation
<input type='text' placeholder='Name'>Correct Implementation
<label for='name'>Full name</label><input id='name' type='text'>
Trusted by organizations across Europe working toward WCAG and EAA conformance