Hidden content must not be read or focused when not visible
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’t see it, they must not be able to focus it or hear it.
Overview
Why this matters
Hidden UI that is still focusable or announced creates a broken experience: users can land on controls they cannot see and lose context.
How to fix this issue
When content is closed/inactive, remove it from interaction and accessibility exposure using `hidden`, `display: none`, `inert`, or controlled `aria-hidden` patterns. Keep ARIA state and focus movement in sync when opening/closing components.
Developer Guidance
Do not rely on visual-only hiding (`opacity: 0`, off-screen positioning) for interactive content. Use semantic state changes and enforce focus safety: hidden regions should not receive Tab focus. For overlays/dialogs, move focus in on open and restore to trigger on close.
Code Examples
Incorrect Implementation
<button aria-expanded="false">Menu</button>
<ul id="menu" style="position:absolute; left:-9999px;">
<li><a href="/about">About</a></li>
</ul>
<!-- Menu is visually hidden but still reachable by keyboard and screen reader -->Correct Implementation
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>
<li><a href="/about">About</a></li>
</ul>
<!-- Menu is fully removed until opened -->Real-World Implementation
Before
<div class="drawer" style="opacity:0;">
<button>Checkout</button>
</div>
<!-- Screen reader announces Checkout button even though user cannot see the drawer -->After
<div class="drawer" aria-hidden="true">
<button disabled tabindex="-1">Checkout</button>
</div>
<!-- Hidden and unfocusable until drawer is opened -->CSS Example (Guidance)
/* Visually hidden utility: keeps content available to assistive tech while hiding it visually */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
/* Use this only when content should remain announced (e.g., extra context text). For fully hidden content, use hidden/display:none/aria-hidden as appropriate. */Manual Testing
- 1. Open then close menus/drawers/dialogs and navigate with keyboard only.
- 2. Confirm focus never lands in closed/hidden regions.
- 3. With a screen reader, verify closed content is not announced.
- 4. Inspect hidden nodes in the accessibility tree and confirm expected exposure state.
- 5. Verify focus enters active overlay on open and returns to trigger on close.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance