Barrierefreiheit

Tastaturfokus bleibt in einer Fokusfalle hängen

Üblicher Schweregrad: hoch · Aufwand: mittel

Woran du es erkennst

Beim Durchtabben der Seite kehrt dasselbe fokussierte Element mehrfach in Folge wieder, ohne dass sich die URL ändert — Tab bewegt den Fokus nicht mehr weiter, alles hinter dieser Stelle ist per Tastatur unerreichbar.

Warum es zählt

Eine Fokusfalle ist ein harter Stopp für Tastatur- und Screenreader-Nutzer: Sie können das Widget nicht verlassen und erreichen den Rest der Seite nicht. Das verletzt WCAG 2.1.2 (Keine Tastaturfalle, Level A) — eines der wenigen Kriterien, bei denen eine einzelne Komponente die ganze Website ohne Maus unbenutzbar macht.

So behebst du es

  1. Nur mit der Tastatur nachstellen: zur Komponente tabben und weiter tabben — der Fokus muss sich immer vorwärts (und mit Shift+Tab rückwärts) bewegen oder per Escape verlassen können.
  2. Zuerst die üblichen Verdächtigen prüfen: Modals/Dialoge, Karussells, eingebettete Widgets und iframes — ein Dialog darf den Fokus nur fangen, solange er offen ist, und gibt ihn beim Schließen an den Auslöser zurück.
  3. Das native <dialog>-Element oder einen erprobten Focus-Trap-Helper nutzen statt selbstgebautem keydown-Abfangen; die Seite hinter einem offenen Overlay als inert markieren statt Tab abzufangen.
  4. Niemals Tab-keydown-Events global schlucken — preventDefault auf Tab ohne programmatische Fokus-Weitergabe ist die klassische selbstgebaute Falle.

Zum Nachlesen