← All rules

Names and roles

Hidden elements must not stay keyboard-reachable

• Rule: aria-hidden-focus
• Severity: Serious
• WCAG level A

Why it matters

aria-hidden="true" hides an element from screen readers but not from the Tab key. Someone using both lands on a control that is announced as nothing, in a part of the page they cannot see.

How to fix it

1. Add the inert attribute to the hidden container so its contents leave the tab order too.
2. Where inert is not an option, set tabindex="-1" on every focusable descendant.
3. For content hidden visually as well, display:none or the hidden attribute removes it from both at once.

In markup

<div aria-hidden="true">
  <button>Buy now</button>
</div>

<div aria-hidden="true" inert>
  <button>Buy now</button>
</div>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

• 4.1.2 Name, Role, Value (opens in new tab) — WCAG level A

Further reading

Deque University on aria-hidden-focus (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.