Ensure every form control has an accessible label
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Placeholders are not labels — every form field needs a real name.
Overview
Why this matters
Labels tell users what information is expected in each form field. Without an accessible label, screen readers announce only the control type (e.g., 'edit text'), leaving users unsure what to enter. This causes confusion, errors, and failed form submissions.
How to fix this issue
Associate each input, select, and textarea with a descriptive label using `<label for="id">` plus a matching control `id`. If no visible label can be shown, provide an accessible name with `aria-label` or `aria-labelledby`.
Developer Guidance
Do not rely on placeholders as labels. In component libraries, require a naming prop and enforce one primary naming path per control (label, aria-label, or aria-labelledby) to avoid missing or conflicting names.
Code Examples
Incorrect Implementation
<input type='text' placeholder='Name'>Correct Implementation
<label for='name'>Full name</label>
<input id='name' type='text'>Real-World Implementation
Before
<input id="email" type="email" />
<!-- Screen reader: 'edit text' → no indication what the field is for -->After
<label for="email">Email address</label>
<input id="email" type="email" />
<!-- Screen reader: 'Email address, edit text' → clear purpose -->CSS Example (Guidance)
/* If designers want visually minimal labels, style instead of removing */
label {
font-size: 0.875rem;
color: #555;
display: block;
margin-bottom: 0.25rem;
}
/* Do NOT hide labels unless replaced with an accessible name */Manual Testing
- 1. Turn on a screen reader and navigate all form fields using Tab/Shift+Tab.
- 2. Verify each field is announced with a meaningful name before role/type.
- 3. In DevTools Accessibility pane, confirm the computed name matches visible label text.
- 4. Check each label-control association (`for` and `id`) in markup.
- 5. If a label is visually hidden, ensure it remains in the accessibility tree (not `display:none` or `visibility:hidden`).
Related Understandable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance