Barrierefreiheit

Tastaturfokus geht beim Tabben verloren

Üblicher Schweregrad: mittel · Aufwand: gering

Woran du es erkennst

Während der Tab-Navigation landet der Fokus auf <body> oder gar nirgendwo — das zuvor fokussierte Element wurde aus dem DOM entfernt oder versteckt, und der Nutzer verliert lautlos seine Position auf der Seite.

Warum es zählt

Wenn der Fokus verloren geht, müssen Tastaturnutzer wieder ganz oben anfangen und können nicht erkennen, wo sie sind — eine desorientierende Sackgasse in der Fokusreihenfolge (WCAG 2.4.3). Typischerweise entfernt die App das fokussierte Element, ohne den Fokus gezielt weiterzugeben.

So behebst du es

  1. Wann immer ein Element entfernt, versteckt (display:none) oder unmounted wird, während es den Fokus halten kann, den Fokus explizit auf einen logischen Nachfolger setzen — das nächste Control, den umgebenden Container oder den Auslöser.
  2. Nach dem Schließen von Dialogen/Menüs den Fokus auf das öffnende Element zurücksetzen; niemals versehentlich auf <body> fallen lassen.
  3. tabindex-Ziele vermeiden, die nur vorübergehend existieren (Toast-Buttons, Skeleton-Items); wenn sie verschwinden, gehört die Fokus-Übergabe in denselben Codepfad.
  4. Den Ablauf nur mit der Tastatur testen: Nach jeder Zustandsänderung (Schließen, Löschen, Absenden) muss der Fokus-Rahmen irgendwo Sinnvollem sichtbar bleiben.

Zum Nachlesen