Inappropriately ARIA Hidden Focusable Content Check

Description

The “Inappropriately ARIA Hidden Focusable Content Check” whether there is any element with aria-hidden="true" containing focusable or interactive content.

Example outcome

I found 1 element with the aria-hidden attribute that has focusable content.

Impact

• Visual Impairments: A user may tab into a button or link that screen readers don’t announce, leaving them stuck or unaware of what’s happening.
• Motor Impairments: People with motor impairments could land on a control that seems broken or unresponsive.
• Cognitive Disabilities: Inconsistent or “ghost” interactions (that appear but aren’t announced) can confuse and frustrate.

Fixes

To address inappropriately focusable hidden content:

1. Locate the element that contains aria-hidden="true".
2. If that’s appropriate, remove focusable children from hidden containers.
3. If the children element(s) are interactable, remove the aria-hidden="true" attribute.
4. Finally, is most suitable, you can also disable the focusable element while it is hidden from assistive tech.

Resources

• WCAG 2.2: Understanding Success Criteria 4.1.2
• ACT Rules: Element with aria-hidden has no content in sequential focus navigation
• WebAIM: Keyboard Accessibility