axe-core rule: aria-hidden-focus

Hidden elements can still receive keyboard focus

Fix reference | BarrierScan

What it is

Elements marked aria-hidden="true" (invisible to screen readers) contain focusable elements such as links or buttons. Keyboard focus lands on something the screen reader says does not exist.

Who it blocks

Screen reader users experience focus disappearing into silence, usually inside closed menus, carousels, or off-screen drawers. It breaks their mental model of the page and can trap them.

How to fix it

When hiding a region with aria-hidden="true", also remove its contents from the tab order: add tabindex="-1" to focusable children, use the inert attribute on the container, or hide it with display:none.

Example fix

<!-- Before -->
<div class="drawer" aria-hidden="true">
  <a href="/account">My account</a>
</div>

<!-- After: inert removes the whole subtree from focus and AT -->
<div class="drawer" aria-hidden="true" inert>
  <a href="/account">My account</a>
</div>

This is one of the barrier types BarrierScan checks for on every scan. Request a free accessibility scan to see whether it appears on your site, alongside the rest of the automated findings.