Rule ID: ace-aria-hidden-focus

Identify focusable elements inside aria-hidden containers that confuse screen reader users

WCAG 2.0 (A) - WCAG 2.2 (A) 4.1.2: Name, Role, Value Blind Low Vision. Deafblind. Mobility User Impact

What This Rule Checks

When an element is hidden using aria-hidden=”true”, its content should not be focusable by users, whether by keyboard or screen readers. If an element is hidden, focusable elements like links, buttons, or form fields inside it should also be made inaccessible. Otherwise, users might still be able to interact with hidden content, leading to a confusing user experience.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision. Deafblind. Mobility users, who have low vision. deafblind. mobility-related needs.

Why This Matters

When focusable elements exist inside aria-hidden containers, keyboard users can Tab to invisible elements. Screen readers may announce nothing or garbled content, leaving users unable to understand what they’ve focused on or how to proceed.

How to Fix

To ensure that aria-hidden=”true” elements do not contain focusable content, follow these guidelines:

Ensure Content Is Not Focusable by Default: Elements inside aria-hidden=”true” should not be naturally focusable, like links or form fields.

Use CSS to Hide Focusable Content: Apply styles like display:none to hide focusable elements visually and from assistive technology.

Make Content Unfocusable Using tabindex=”-1″: For elements like buttons or links, add tabindex=”-1″ to remove them from the tab order.

Disable Focusable Content: For inputs or buttons, use the disabled attribute to prevent focus.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Focusable button inside hidden container -->
<div aria-hidden="true">
  <button>Submit</button>
  <a href="/help">Help</a>
</div>

Copy

Correct Markup Solutions:

Code example

<!-- Remove focusability from hidden content -->
<div aria-hidden="true">
  <button tabindex="-1" disabled>Submit</button>
  <a href="/help" tabindex="-1">Help</a>
</div>

<!-- Or better: remove aria-hidden if content should be interactive -->
<div>
  <button>Submit</button>
  <a href="/help">Help</a>
</div>

Copy

Common Mistakes to Avoid

Hiding a container with aria-hidden but forgetting to disable focusable children.
Using CSS display:none alongside aria-hidden (display:none already removes from focus order).
Not testing keyboard navigation through aria-hidden regions.

Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.

Related WCAG Criteria

4.1.2: Name, Role, Value