Barrierefreiheit

Fokussierbares Element innerhalb von aria-hidden

Üblicher Schweregrad: hoch · Aufwand: gering

Woran du es erkennst

Ein Container ist mit aria-hidden="true" versteckt, enthält aber Links, Buttons oder Formularfelder, die per Tastatur noch erreichbar sind (axe-Regel aria-hidden-focus) — klassisch bei halbtransparenten Off-Canvas-Menüs und Modal-Hintergründen.

Warum es zählt

Der Fokus landet auf unsichtbaren Elementen: Tastaturnutzer tappen „ins Leere", sehen keinen Fokusindikator mehr und wissen nicht, wo sie sind. Screenreader-Nutzer hören den Inhalt nicht, können ihn aber bedienen — ein komplett widersprüchlicher Zustand.

So behebst du es

  1. Verwende für geschlossene Menüs/Overlays display: none oder visibility: hidden statt nur aria-hidden — das entfernt die Elemente auch aus der Tab-Reihenfolge.
  2. Setze bei geöffneten Dialogen den Seitenhintergrund zusätzlich auf inert (inert-Attribut), damit der Hintergrund weder fokussierbar noch vorgelesen wird.
  3. Prüfe nach dem Öffnen/Schließen jedes Overlays mit der Tab-Taste, ob der Fokus nur noch sichtbare Elemente erreicht.

Zum Nachlesen