Zu Content springen
Deutsch
Kontakt
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

A: ARIA-hidden Elemente dürfen keine fokussierbaren Elemente beinhalten (WCAG 4.1.2)

aria-hidden-focus

Stellt sicher, dass ARIA-hidden Elemente keine fokussierbaren Elemente beinhalten.

Das bedeutet

Bereiche mit aria-hidden="true" sind für Screenreader unsichtbar. Befinden sich darin trotzdem fokussierbare Elemente (z. B. Links, Buttons, Inputs oder Elemente mit tabindex="0"), können Nutzerinnen und Nutzer per Tastatur dorthin springen, Assistive Technologien geben aber keinen Inhalt aus.

Auswirkung

Verwirrung, Fokusfallen und fehlender Kontext für Screenreader-Nutzerinnen und Nutzer → Abbrüche und WCAG-Verstoß.

Empfehlung

  • In aria-hidden="true"-Bereichen keine fokussierbaren Elemente belassen.
  • Entweder Bereich vollständig aus dem DOM-Fluss entfernen (hidden/display:none) oder per inert samt aria-hidden="true" deaktivieren.
  • Falls Ausblenden nur temporär: Nach der Aktion Fokus wieder sichtbar und lesbar machen (Zustände zurücksetzen).

Beispiel

Problematisch

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

Besser

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

Alternative (vollständig verbergen)

<div hidden> … </div>

Verknüpftes WCAG-Kriterium:
WCAG 4.1.2 - Name, Rolle, Wert