Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web

aria-hidden-focus

Elements with aria-hidden="true" must not contain focusable elements.

Why it matters

In some browsers, the attribute aria-hidden="true" hides an element and all its children from assistive technologies. Users can still use the keyboard to navigate to any focusable child elements, but their content is inaccessible to people who use assistive technologies. For example, screen readers are silent. (An element is focusable if it can receive input focus via scripting, mouse interaction, or keyboard tabbing.)

How to fix

Make sure elements with aria-hidden="true" do not contain focusable elements using one or more of the following methods.

  • Use aria-hidden="true" only on elements whose content is decorative or redundant from the perspective of people who use assistive technologies.
  • Restructure the code so the focusable elements are not children of the hidden element.
  • Where appropriate, make the child elements non-focusable (by applying the disabled attribute) or non-tabbable (by applying tabindex="-1").
  • Where appropriate, hide elements from all users by applying hidden, display:none, or visibility:hidden attributes.

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 they can’t to tell what it is.

 

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.

About this rule

This rule passes if ANY of the following are true:

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

More examples