Start scanning free

( Robust / WCAG 4.1.2 )

Focusable element is inside an aria-hidden container

This check maps to Name, Role, Value. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Critical Level A WCAG 4.1.2 — Name, Role, Value

What’s wrong

A focusable control is inside a container marked aria-hidden=“true”.

Why it matters

Keyboard-only users can still tab to the hidden control, but screen reader users may not hear it announced. This creates a trap where focus moves to something they cannot perceive.

How to fix it

Use semantic HTML and valid ARIA so assistive technology gets the same state and structure as sighted users. Keep labels and states explicit in markup.

Before 
<div aria-hidden="true">
  <button>Close</button>
</div>
After 
<div aria-hidden="true">
  <span>Decorative icon</span>
</div>
<button>Close</button>

If this pattern is generated by a component, fix it once in the shared component so every instance inherits the accessible behavior.

Learn more