Do not allow focus on elements marked aria-hidden
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.
Hidden elements must not receive keyboard focus.
Why this matters and how to fix it
Why this matters
Elements with `aria-hidden="true"` are removed from the accessibility tree. If such elements remain keyboard-focusable, users may tab into controls that provide no feedback, causing confusion and navigation loss.
How to fix this issue
Ensure that elements hidden from assistive technologies are also removed from the keyboard focus order. Remove focusable elements marked with `aria-hidden="true"`, or set `tabindex="-1"` and remove focusable attributes (such as `href`). For form controls, the `disabled` attribute may also be used. Alternatively, visually hide or unmount the element from the DOM.
Developer guidance
This issue often appears during animations, conditional rendering, or SPA visibility toggling. Remember: `aria-hidden` only affects screen readers — it does not prevent keyboard focus. Always pair hidden states with focus management and verify by tabbing through the interface that hidden elements are unreachable.
Code examples
Incorrect Implementation
<button aria-hidden="true">Invisible action</button>Correct Implementation
<button aria-hidden="true" tabindex="-1" disabled>Invisible action</button>
<!-- or visually hide / unmount the element instead of using aria-hidden alone -->Real-World Examples
Before
<div aria-hidden="true"><a href="#">Hidden link</a></div> <!-- Link is focusable but hidden from screen readers -->After
<div aria-hidden="true"><a aria-disabled="true" tabindex="-1">Hidden link</a></div> <!-- Not focusable and consistent with hidden state -->CSS Example (Guidance)
.hidden { display: none; }Manual testing
- 1. Identify elements with `aria-hidden="true"`.
- 2. Verify none are reachable via keyboard (Tab/Shift+Tab).
- 3. For links, remove `href` or set `tabindex="-1"`. For form controls, use `disabled` if appropriate.
- 4. Test tabbing through the page to confirm no focus lands on hidden elements.
- 5. Use a screen reader to confirm hidden elements are not announced.
Trusted by organizations across Europe working toward WCAG and EAA conformance