aria-hidden Elements Must Not Contain Focusable Elements

What Is This Issue?

When you use aria-hidden="true" on an element, you're telling screen readers to ignore it completely. But if that hidden container contains links, buttons, or form fields, keyboard users can still tab to them. This creates a confusing experience where users focus on elements they can't hear announced.

Why This Matters

Keyboard-only users and screen reader users navigate differently. If they can reach an element with the keyboard but can't hear what it is, they're essentially navigating blind through parts of your interface.

Common Scenarios

• Modal dialogs that are hidden but still contain focusable elements
• Off-screen navigation menus
• Decorative containers with accidentally included interactive elements
• Tab panels that are hidden but not properly managed

How to Fix This Issue

1. Option A: Remove focusable elements from the hidden container
2. Option B: Add tabindex="-1" to all focusable elements within
3. Option C: Remove aria-hidden if the content should be accessible
4. Option D: Use CSS display:none or visibility:hidden instead (these also remove from tab order)