a11y/aria-hidden-focusable

Why

aria-hidden removes an element from what a screen reader announces but not from the Tab order. Keyboard focus then lands on something that has no name and no role: the user hears silence or "blank".

Fix

Hide content from everyone with hidden or inert (inert also removes it from focus and from pointer use), or take the controls out of the hidden part. Use aria-hidden="true" only on decoration such as icons and duplicated visuals with nothing focusable inside.

Examples

<!-- bad: an off-screen drawer hidden only from screen readers -->
<nav aria-hidden="true"><a href="/">Home</a></nav>
<!-- good -->
<nav inert><a href="/">Home</a></nav>
<svg aria-hidden="true" focusable="false">…</svg>

Sources

• WCAG 2.2, Understanding SC 4.1.2 Name, Role, Value
• W3C, ARIA in HTML (aria-hidden)
• MDN, the inert global attribute

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/aria-hidden-focusable