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
disabledattribute) or non-tabbable (by applyingtabindex="-1"). - Where appropriate, hide elements from all users by applying
hidden,display:none, orvisibility:hiddenattributes.
Example
Fail
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
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