Disallows aria-hidden
on focusable elements
- Rule ID:
- hidden-focusable
- Category:
- Accessibility
- Standards:
- WCAG 2.2 (A)
- WCAG 2.1 (A)
- WCAG 2.0 (A)
When focusable elements are hidden with aria-hidden
they are still reachable using conventional means such as a mouse or keyboard but won't be exposed to assistive technology (AT).
This is often confusing for users of AT such as screenreaders.
This applies to the element itself and any ancestors as aria-hidden
applies to all child elements.
To fix this either:
- Remove
aria-hidden
. - Remove the element from the DOM instead.
- Use
tabindex="-1"
to remove the element from tab order. - Use
hidden
,inert
or similar means to hide or disable the element.
Rule details
Examples of incorrect code for this rule:
<a href="#" aria-hidden="true">
lorem ipsum
</a>
Examples of correct code for this rule:
<a href="#">
lorem ipsum
</a>
Version history
- 8.16.0 - Rule handles
inert
,tabindex="-1"
anddisabled
. - 8.9.0 - Rule added.