Visible labels must not be hidden from assistive technology
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.
If users can see the label, assistive tech must be able to read it too.
Overview
Why this matters
If a label is visible on screen but hidden from assistive technology, screen reader users receive no label and cannot understand the purpose of the form field. This causes input errors and prevents users from completing forms confidently.
How to fix this issue
Do not apply `aria-hidden`, `display:none`, or `visibility:hidden` to labels users should rely on. If visual design requires hidden text, use a proper visually-hidden utility so the label stays available to assistive technologies.
Developer Guidance
A common anti-pattern is hiding labels while relying on placeholders. Keep visual and programmatic labeling aligned, and treat hidden labels as an exception pattern with explicit implementation guidance.
Code Examples
Incorrect Implementation
<label for="email" aria-hidden="true">Email</label>
<input id="email" type="email">Correct Implementation
<label for="email">Email</label>
<input id="email" type="email">Real-World Implementation
Before
<label for="zip" aria-hidden="true">ZIP Code</label>
<input id="zip" type="text"> <!-- Screen reader announces no label -->After
<label for="zip">ZIP Code</label>
<input id="zip" type="text"> <!-- Screen reader announces 'ZIP Code' correctly -->CSS Example (Guidance)
/* Use to visually hide labels while keeping them accessible */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Manual Testing
- 1. Inspect any label associated with an input.
- 2. Confirm the label is not using `aria-hidden`, `display:none`, or `visibility:hidden`.
- 3. If the label must be visually hidden, ensure it uses an accessible visually-hidden technique (not removed from accessibility tree).
- 4. Test with a screen reader to confirm the field is announced with the correct label.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance