Content hidden from screen readers but reachable by keyboard

WCAG 4.1.2, 1.3.1 (A) · EN 301 549 9.4.1.2

An element with aria-hidden="true" contains elements that can receive focus.

Why it matters

This creates the worst possible combination: a keyboard user tabs into the element, but the screen reader announces nothing. Focus disappears into a hole. It nearly always happens with menus or modals hidden with aria-hidden but not removed from the tab order.

How to fix it

When you hide something, hide it properly: use display:none or the hidden attribute, or add tabindex="-1" to every focusable element inside.

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

<div hidden>
  <a href="/x">Link</a>
</div>

Related

• Image button with no alternative text
• Embedded frame with no title
• Form fields with no label
• Buttons with no name