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:

Rule details

Examples of incorrect code for this rule:

<a href="#" aria-hidden="true">
	lorem ipsum
</a>
error: aria-hidden cannot be used on focusable elements (hidden-focusable) at inline:1:13:
> 1 | <a href="#" aria-hidden="true">
    |             ^^^^^^^^^^^
  2 | 	lorem ipsum
  3 | </a>


1 error found.

Examples of correct code for this rule:

<a href="#">
	lorem ipsum
</a>

Version history