Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

A: ARIA hidden element must not be focusable or contain focusable elements (WCAG 4.1.2)

aria-hidden-focus

Ensure that ARIA-hidden elements do not contain any focusable elements.

This means

Areas with aria-hidden="true" are invisible to screen readers. However, if there are still focusable elements inside (e.g., links, buttons, inputs, or elements with tabindex="0"), users can navigate to them via keyboard, but assistive technologies will output no content.

Impact

Confusion, focus traps, and lack of context for screen reader users → Interruptions and WCAG violation.

Recommendation

  • Do not leave any focusable elements inside areas with aria-hidden="true".
  • Either remove the area completely from the DOM flow (hidden/display:none) or disable it using inert along with aria-hidden="true".
  • If hiding is only temporary: After the action, make the focus visible and readable again (reset states).

Example

Problematic

<div aria-hidden="true">
  <a href="/hilfe">Help</a>
  <button>OK</button>
</div>

Better

<div inert aria-hidden="true">
  <a href="/hilfe">Help</a>
  <button>OK</button>
</div>

Alternative (completely hide)

<div hidden> … </div>

Related WCAG criterion:
WCAG 4.1.2 - Name, Role, Value