aria-hidden elements must not contain focusable content

Rule aria-hidden-focusable · ARIA · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

aria-hidden removes content from the accessibility tree but not from the tab order. A focusable element inside it becomes a "phantom" stop: keyboard users land on a control screen readers refuse to announce.

How to fix#

Remove aria-hidden, or make the contained controls unfocusable (e.g. tabindex="-1" / disabled / display:none).

Example#

<div aria-hidden="true"><a href="/x">Link</a></div>

<div aria-hidden="true"><a href="/x" tabindex="-1">Link</a></div>

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Trusted Tester

References#

• WAI-ARIA — aria-hidden