Form elements should have a visible 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 disappear — labels do not. Every form field needs a real label.
Overview
Why this matters
Screen reader and keyboard-only users rely on labels to understand the purpose of form controls. If a form field has no visible label, the user may hear only 'edit text' or 'input' with no context, making it unclear what information is required.
How to fix this issue
Provide a visible text label using `<label for="...">` that describes the input’s purpose. If visual label placement is constrained by design, keep the label but style it; do not remove it. If necessary, supplement or replace with `aria-label` or `aria-labelledby` to ensure a programmatic accessible name.
Developer Guidance
Placeholders are not labels. Favor visible labels by default, and treat hidden labels as an exception pattern. In design systems, require a visible label unless a documented exception uses `aria-label` or `aria-labelledby`.
Code Examples
Incorrect Implementation
<input id="email">Correct Implementation
<label for="email">Email</label>
<input id="email">Real-World Implementation
Before
<input type="password" placeholder="••••••"> <!-- Screen reader: 'edit text' → no context -->After
<label for="password">Password</label>
<input id="password" type="password"> <!-- Screen reader: 'Password, edit text' -->CSS Example (Guidance)
/* If the label should be visually minimal, style it — do not remove it */
label {
font-size: 0.875rem;
opacity: 0.85;
display: block;
margin-bottom: 0.25rem;
}
/* For visually-hidden labels (only when necessary): */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}Manual Testing
- 1. Scan each form control and confirm a visible label is present near the field.
- 2. Navigate with a screen reader and verify field names are announced clearly.
- 3. Confirm visible label text and computed accessible name remain aligned.
- 4. For intentional hidden-label cases, verify naming is explicit via ARIA and still understandable.
- 5. Validate icon-only controls have meaningful accessible names and clear purpose.
Related Understandable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance