Keyboard Trap

Ein Keyboard Trap bezeichnet eine Barriere, bei der der Tastaturfokus innerhalb eines Bereichs „gefangen“ ist. Das bedeutet: Nutzerinnen, die ausschließlich mit der Tastatur navigieren – etwa Menschen mit motorischen Einschränkungen oder Screenreader-Nutzerinnen – können nicht weiter oder zurück navigieren, weil die Fokussteuerung fehlerhaft oder unvollständig ist.

Das Problem

Keyboard Traps blockieren den freien Zugang zur gesamten Seite. Sie verhindern, dass Nutzer:innen Inhalte außerhalb des eingeschlossenen Bereichs erreichen – oder überhaupt bemerken, dass es weitere Inhalte gibt.
Typische Fallen sind schlecht programmierte Modale, iFrames, Formulare oder Custom Widgets.

Häufige Ursachen

• Modale Fenster, bei denen focus() auf ein Element gesetzt wird – aber kein Mechanismus existiert, um den Fokus zurückzugeben.

• Formulare mit eingebauten Validierungsfehlern, bei denen der Fokus in einer Schleife zwischen zwei Feldern springt.

• JavaScript-Komponenten, die das Standardverhalten des Tabulatorflusses unterbrechen oder nicht sauber schließen.

Best Practices

• Fokusführung dokumentieren: Definiere, wie Fokus in und aus Komponenten hinein- und hinausgeführt wird.

• Escape ermöglichen: Bei Modals oder Overlays muss der Fokus zurück zur auslösenden Stelle springen, wenn das Element geschlossen wird.

• Nur Tab & Shift+Tab verwenden: Erlaube dem Nutzer, mit Tab nach vorne und mit Shift+Tab zurück durch alle interaktiven Elemente zu navigieren.

• Keine unfreiwilligen Fokusverschiebungen: Verschiebe den Fokus niemals automatisiert ohne nachvollziehbaren Grund.

Testmethode

• Navigiere die Seite ausschließlich mit Tab, Shift+Tab und Enter.

• Achte darauf, ob du irgendwo “stecken bleibst”.

• Teste insbesondere dynamische Elemente wie Dialoge, Slideshows, Navigationsmenüs und Formulare.

Hinweis

Ein Keyboard Trap ist kein kleiner Usability-Fehler, sondern ein kritischer Verstoß gegen die Barrierefreiheitsanforderungen. Er macht Inhalte für viele Nutzer:innen schlicht unbedienbar.