a11y/aria-hidden-focusable

Dlaczego

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".

Poprawka

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.

Przykłady

<!-- 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>

Źródła

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

Przeczytaj w terminalu

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