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.
Why this matters and how to fix it
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 visible labels. If you need to visually hide a label (but still make it available to screen readers), apply a visually-hidden utility class instead.
Developer guidance
A common anti-pattern is hiding labels because they 'seem redundant'. However, visual labels and programmatic labels must match. Only visually hide labels when they are intentionally not meant to be seen but still must be read by assistive technology.
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 Examples
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.
Trusted by organizations across Europe working toward WCAG and EAA conformance