Avoid focusable elements inside aria-hidden containers

WCAG 4.1.2
Name, Role, Value

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Focus must never reach elements hidden with aria-hidden.

Why this matters and how to fix it

Why this matters

Elements inside containers with `aria-hidden="true"` are removed from the accessibility tree. If focusable elements remain inside, keyboard users can tab into them while screen readers ignore them, causing confusion, lost context, and broken navigation.

How to fix this issue

Prevent any element inside an `aria-hidden` container from receiving focus. You can remove the element from the DOM, or for temporarily hidden content, set `tabindex="-1"` and remove any focusable attributes (such as `href`). Only mark content as `aria-hidden` if it is truly inactive or not meant for interaction.

Automated detection · Manual review recommended

Developer guidance

This issue commonly appears in modals, drawers, and flyouts. When opening a modal, move keyboard focus inside the active dialog and set `aria-hidden="true"` on background content. Verify that background links and inputs cannot be reached via keyboard and are not announced by screen readers.

Code examples

Incorrect Implementation

<div aria-hidden="true">
  <button>Hidden action</button>
</div>

Correct Implementation

<div aria-hidden="true">
  <button tabindex="-1" disabled>Hidden action</button>
</div>
<!-- or remove the button entirely when hidden -->

Real-World Examples

Before

<div aria-hidden="true">
  <a href="#">Background link</a>
</div> <!-- Focusable but hidden from screen reader -->

After

<div aria-hidden="true">
  <a aria-disabled="true" tabindex="-1">Background link</a>
</div> <!-- Not focusable and hidden from all users -->

CSS Example (Guidance)

.hidden { display: none; }

Manual testing

  1. 1. Identify containers with `aria-hidden="true"`.
  2. 2. Check that no interactive elements inside can receive focus.
  3. 3. Remove `href` or set `tabindex="-1"` on links; add `disabled` on form controls if appropriate.
  4. 4. Test keyboard navigation to ensure focus cannot reach hidden content.
  5. 5. Confirm with a screen reader that hidden elements are not announced.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance