ARIA Hidden Focus

Why It Matters

• It creates a "black hole" in keyboard navigation. Users tab to an element, but their screen reader says nothing. They do not know if they hit a button, a link, or a blank space — and they have no way to find out without sighted help.
• It breaks the expected flow. Keyboard users build a mental model of the page as they tab through it. A silent, undescribed stop disrupts that model and makes the rest of the page harder to navigate.
• It usually signals a logic error. If something is important enough to be focusable, it should not be hidden. And if it is truly meant to be hidden, it should not be focusable. The mismatch means the code is saying two contradictory things.
• Automated tools flag it clearly. This is a straightforward pass/fail check — making it one of the easier issues to detect and fix once you know what to look for.

How to Fix It

1. Add tabindex="-1" to hidden focusable elements. If an element truly needs to have aria-hidden="true", set tabindex="-1" so it is also removed from the tab order.
2. Check all descendants too. When you set aria-hidden="true" on a container, every focusable element inside it (links, buttons, inputs) must also be removed from the tab order.
3. Reconsider whether aria-hidden is needed. Sometimes the simpler fix is to remove aria-hidden entirely and let the element be both visible and accessible. Ask whether hiding it actually improves the experience.
4. Use display: none or hidden when fully hiding. These CSS and HTML approaches remove elements from both the accessibility tree and the tab order automatically — no extra attributes needed.
5. Use the inert attribute for background content. When suppressing a section behind a modal, inert makes it both non-focusable and hidden from assistive tools in one step.

Common Mistakes

• Hiding a container but forgetting its children. Setting aria-hidden="true" on a <div> hides it from screen readers, but the links and buttons inside can still receive focus unless you explicitly prevent it.
• Using aria-hidden to visually hide content. This attribute does not hide anything visually — it only affects assistive tools. For visual hiding, use CSS. Mixing these up creates the exact mismatch this check catches.
• Leaving off-screen menus focusable. Slide-out navigation panels that are positioned off-screen with CSS but not properly hidden still let keyboard users tab into invisible links.
• Dynamically toggling only one attribute. JavaScript that adds aria-hidden without also managing tabindex (or vice versa) will create this mismatch every time the state changes.