Ensure aria-hidden elements are not focusable nor contain focusable elements

Why It Matters

Applying aria-hidden="true" to an element hides it and all its children from assistive technologies, such as screen readers. However, users can still navigate to any focusable child elements using the keyboard. This discrepancy means that while these elements are focusable, their content remains inaccessible to assistive technology users, leading to confusion and a poor user experience.

About This Rule

This rule ensures that elements with aria-hidden="true" do not contain focusable elements. It passes if any of the following are true:

• The element with aria-hidden="true" contains no focusable elements.
• The element with aria-hidden="true" contains only focusable elements that are disabled or not tabbable.

How to Fix

• Use aria-hidden="true" only on elements whose content is decorative or redundant for assistive technology users.
• Restructure the code so that focusable elements are not children of an element with aria-hidden="true".
• Make child elements non-focusable by applying the disabled attribute or non-tabbable by setting tabindex="-1".
• Where appropriate, hide elements from all users by applying the hidden attribute or using CSS properties like display: none; or visibility: hidden;.

Example

Fail

An alert is positioned off-screen and marked with aria-hidden="true" until it’s needed. However, the alert contains an OK button that remains focusable even when the alert is hidden. Keyboard users can tab to the button but cannot discern its purpose.

<div class="alert" aria-hidden="true">
  <p>This is an important alert message.</p>
  <button>OK</button>
</div>

Pass

When the alert is positioned off-screen, its OK button is marked with tabindex="-1". Keyboard users encounter the button only when the alert is on-screen.

<div class="alert" aria-hidden="true">
  <p>This is an important alert message.</p>
  <button tabindex="-1">OK</button>
</div>