Do not allow focus on aria-hidden elements
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
When focusable elements remain active inside containers marked aria-hidden="true", keyboard and screen-reader users can reach elements that are visually and semantically hidden. This creates confusion, breaks navigation order, and can trap users in invisible sections of the interface.
How to fix this issue
Remove focusable descendants or tabindex attributes from any element that has aria-hidden="true". Alternatively, update your component logic to disable or remove those nodes from the DOM when they are hidden. Always verify focus management behavior with keyboard-only testing to ensure users can move predictably through interactive controls.
Developer guidance
This commonly occurs in modal or drawer implementations where hidden panels remain mounted. Before toggling visibility, ensure that hidden content is also unfocusable. Frameworks like React and Vue can conditionally render nodes to prevent this problem entirely. Incorporate automated accessibility regression tests to check that hidden containers contain no tabbable elements.
Code examples
Incorrect Implementation
<div aria-hidden="true"><button>Submit</button></div>Correct Implementation
<div><button>Submit</button></div>
Trusted by organizations across Europe working toward WCAG and EAA conformance