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>

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

• 8.16.0 - Rule handles inert, tabindex="-1" and disabled.
• 8.9.0 - Rule added.