How to fix: Hidden elements must not be focusable
An element with aria-hidden="true" must not contain focusable controls, or keyboard users tab onto targets a screen reader cannot see.
The fix
Do not place focusable elements inside aria-hidden="true" containers.
Who this affects
aria-hidden="true" removes an element and everything inside it from the accessibility tree, and it has no effect at all on the tab order. A keyboard user tabbing past a closed off-canvas menu or an inactive carousel slide sees the focus ring vanish off screen, and a screen-reader user hears silence while focus sits on a link they can neither read nor identify. Speech-recognition users hit the same wall, because a control with no exposed name is a control they cannot say out loud.
Before and after
<div aria-hidden="true"><button>Save</button></div><div aria-hidden="true"><button tabindex="-1" disabled>Save</button></div>Where this usually comes from
- An icon wrapper marked aria-hidden="true" surrounds the whole button rather than only the SVG glyph inside it.
- A drawer or dropdown hidden with opacity: 0, transform or height: 0 plus aria-hidden, while its links keep their normal tab stops.
- Inactive carousel slides or tab panels left in the DOM with aria-hidden and no tabindex="-1" on the controls they contain.
- A modal library marks the background content aria-hidden="true" without also applying inert or otherwise taking it out of the tab order.
- aria-hidden="false" added to a child in an attempt to expose it again, which cannot override the hidden ancestor.
Checking it yourself
Tab through the page slowly and watch the focus ring; if it disappears, or the page scrolls to something you cannot see, focus has landed inside a hidden container. Confirm it by running document.activeElement in the console at that point, or by opening the Accessibility pane in Chrome devtools, where the focused node is reported as not exposed to assistive technology. Repeating the same tab sequence with NVDA or VoiceOver running makes it plain, because focus moves and nothing is announced.
A scanner finds this one automatically. What it cannot judge, and how the score is built, is on how we test.
Related fixes
Check your site for this issue
Scan any page free against WCAG 2.2 AA and get every automatically detected issue with its fix.