R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Avoid Focusable Elements Inside aria-hidden Containers

  • Home
  • Blog
  • Avoid Focusable Elements Inside aria-hidden Containers
  • June 1, 2025

Avoid Focusable Elements Inside aria-hidden Containers

Rule ID: aria-hidden-focus
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549

How to Fix the Problem

To fix this issue, ensure that no focusable elements are placed inside containers marked with aria-hidden="true". The aria-hidden="true" attribute is intended to make content inaccessible to screen readers and assistive technologies. However, if any element inside such a container is still keyboard-focusable, it creates a confusing experience for users relying on assistive tech.

Steps to resolve:

  • Remove focusability of elements within aria-hidden="true" containers:

    • Use tabindex="-1" to prevent keyboard focus.

    • Use disabled for form controls if they are visually hidden.

    • Use display: none or visibility: hidden for hidden links/buttons.

  • Do not attempt to reset aria-hidden on children. If a parent has aria-hidden="true", then no descendant should try to override it with aria-hidden="false"—this has no effect and leaves the content inaccessible.

✅ Correct examples (PASS):

html
<!-- Static content only -->
<p aria-hidden="true">Some text</p><!– Hidden via CSS –>
<div aria-hidden=“true”>
<a href=“/” style=“display:none”>Link</a>
</div>

<!– Unfocusable via tabindex –>
<div aria-hidden=“true”>
<button tabindex=“-1”>Some button</button>
</div>

<!– Form element disabled –>
<input disabled aria-hidden=“true” />

❌ Incorrect examples (FAIL):

html
<!-- Focusable link off screen -->
<div aria-hidden="true">
<a href="/" style="position:absolute; top:-999em">Link</a>
</div><!– Incorrect disabling using aria-disabled (ineffective) –>
<div aria-hidden=“true”>
<input aria-disabled=“true” />
</div>

<!– Attempt to override aria-hidden from ancestor –>
<div aria-hidden=“true”>
<div aria-hidden=“false”>
<button>Some button</button>
</div>
</div>

<!– Tabindex makes it focusable –>
<p tabindex=“0” aria-hidden=“true”>Some text</p>

Why it Matters

Using aria-hidden="true" removes an element and all of its children from the accessibility tree, making them invisible to screen readers and other assistive technologies.

However, focusable elements inside an aria-hidden="true" container still respond to keyboard navigation (e.g., via the Tab key). This causes a disconnection between what is seen, what is focusable, and what is announced, which can confuse users and lead to severe accessibility issues.

If assistive technology users can’t access the focusable element’s content—or worse, if it’s not announced at all—they may mistakenly believe something is broken or miss essential functionality.

Important: You cannot “undo” aria-hidden="true" on a child element. Once the parent is hidden, the child is hidden regardless of its own attributes.

Rule Description

This rule ensures that no element marked with aria-hidden="true" contains any focusable descendants. Focusable elements must be accessible to all users, so they should never be hidden from assistive technology while still being keyboard-accessible.

The Algorithm (in simple terms)

  1. Identify all elements with aria-hidden="true".

  2. Check whether any of their child elements are focusable.

  3. If any focusable child is found (e.g., <a>, <button>, <input>, or any element with tabindex="0"), the rule fails.

Tags:
Share:

Leave A Comment