Barrierefreiheit

Fokussiertes Element wird von einem Overlay verdeckt

Üblicher Schweregrad: mittel · Aufwand: gering

Woran du es erkennst

Das Element mit dem Tastaturfokus ist an seinem Mittelpunkt von einer position:fixed- oder position:sticky-Ebene verdeckt (Sticky-Header, Cookie-Banner, Chat-Widget) — der Fokus ist gesetzt, aber auf dem Bildschirm nicht sichtbar.

Warum es zählt

Tastaturnutzer navigieren blind, wenn das fokussierte Control verdeckt ist: Sie aktivieren Elemente, die sie nicht sehen, und verlieren das Vertrauen in die Bedienung. WCAG 2.4.11 (Fokus nicht verdeckt, Level AA) verlangt, dass das fokussierte Element mindestens teilweise sichtbar bleibt.

So behebst du es

  1. Seiten mit Sticky-Header ausreichend scroll-padding-top geben (in Höhe des Headers), damit fokussierte oder angesprungene Elemente nie darunter landen.
  2. Banner und Cookie-Layer aus dem Fokuspfad halten: per Escape schließbar machen und sicherstellen, dass sie im geöffneten Zustand keine tabbaren Inhalte überdecken.
  3. Spät erscheinende Widgets prüfen (Chat-Bubbles, sticky CTAs): Wenn sie Inhalt überlagern, Platz reservieren oder einklappbar machen.
  4. Per Tastatur verifizieren: bei sichtbarem Header/Banner durch die Seite tabben — jeder Fokus-Rahmen muss vollständig im Blick bleiben.

Zum Nachlesen