1. Was ist das Ziel dieses Kriteriums?
Du kennst es sicher aus Escape Rooms – der Nervenkitzel, aber auch die Panik, wenn du keinen Ausgang findest. Genau das passiert Nutzern von Tastatur und Screenreader, wenn sie in einem Website-Element "gefangen" sind und nicht mehr herauskommen.
Das Ziel von Erfolgskriterium 2.1.2 der WCAG ist es sicherzustellen, dass niemand in einem Teil deiner Website stecken bleibt. Jeder Nutzer muss mit der Tastatur nicht nur in jedes Element hineinnavigieren können, sondern auch wieder heraus – ohne Umwege über die Maus.
2. Was fordert das Erfolgskriterium genau?
Ganz konkret geht es um eine einfache Regel: Rein heißt auch wieder raus – nur mit der Tastatur.
Wenn ein Nutzer mit der Tab-Taste zu einem Element navigieren kann, muss er auch wieder weg davon navigieren können. Das gilt für:
- Standard-Navigation: Meist reichen Tab, Shift+Tab und Pfeiltasten völlig aus
- Spezielle Komponenten: Wenn ein Element ungewöhnliche Tastenkombinationen erfordert (z.B. Esc zum Schließen), müssen Nutzer darüber informiert werden – idealerweise bevor sie das Element betreten
- Alle Bereiche der Seite: Modal-Dialoge, Widgets, eingebettete Inhalte, Formulare – alles muss verlassbar sein
Ausnahmen gibt es praktisch keine – dieses Kriterium ist so fundamental, dass es für alle Inhalte auf deiner Website gilt, egal ob sie andere Barrierefreiheits-Kriterien erfüllen oder nicht.
3. Warum ist das wichtig für Barrierefreiheit?
Stell dir vor, du navigierst nur mit der Tastatur durch eine Website und gelangst in ein Pop-up-Fenster. Aber egal, was du drückst – du kommst nicht mehr raus. Das ist nicht nur frustrierend, sondern macht die gesamte Website unbenutzbar.
Keyboard Traps schaffen echte Barrieren, weil sie:
- Blinde und sehbehinderte Menschen daran hindern, Screenreader effektiv zu nutzen
- Menschen mit motorischen Einschränkungen zwingen, die Maus zu verwenden, obwohl sie nur die Tastatur nutzen können
- Power-User beim effizienten Arbeiten mit Tastatur-Shortcuts ausbremsen
- Alle Nutzer in Situationen mit defekter oder nicht verfügbarer Maus im Stich lassen
Und das Tückische: Ein einziger Keyboard Trap kann die gesamte Website unbrauchbar machen – selbst wenn alle anderen Bereiche perfekt barrierefrei sind.
4. So setzt du das Kriterium erfolgreich um
Die gute Nachricht: Keyboard Traps sind meist einfach zu vermeiden, wenn du ein paar Grundregeln beachtest.
Grundlagen für alle Elemente:
- Teste alle interaktiven Bereiche: Kannst du mit Tab hinein und mit Tab oder Shift+Tab wieder heraus?
- Nutze Standard-HTML-Elemente wann immer möglich – sie bringen das richtige Verhalten meist schon mit
- Vergiss nie die Rückwärts-Navigation: Shift+Tab muss immer funktionieren
Für Modal-Dialoge und Pop-ups:
- Fokus beim Öffnen in den Dialog lenken
- Esc-Taste zum Schließen implementieren
- Fokus-Ring innerhalb des Dialogs halten (Tab springt vom letzten zum ersten Element)
- Nach dem Schließen Fokus an die ursprüngliche Position zurücksetzen
Für komplexe Widgets und eingebettete Inhalte:
- Klare Anweisungen vor dem Widget platzieren: "Nutzen Sie Esc, um das Widget zu verlassen"
- Standard-Exit-Methoden bevorzugen (Tab, Shift+Tab, Esc)
- Bei fremden Widgets (YouTube, Maps, etc.): Sicherstellen, dass sie tastaturzugänglich sind
Der wichtigste Test: Steck deine Maus weg und navigiere nur mit der Tastatur durch deine gesamte Website. Wenn du irgendwo "hängen bleibst", hast du einen Keyboard Trap gefunden.
5. Warum dieses Erfolgskriterium für Unternehmen relevant ist
Keyboard Traps sind nicht nur ein Barrierefreiheits-Problem – sie kosten dich aktiv Kunden und Geschäftschancen.
1. Zielgruppe erweitern
Ein Website-Bereich, aus dem Nutzer nicht herauskommen, ist wie ein Geschäft ohne Ausgang. Du verlierst nicht nur Menschen mit Behinderungen, sondern auch alle, die temporär auf die Tastatur angewiesen sind – etwa bei defekter Maus oder in mobilen Situationen.
2. Rechtssicherheit gewährleisten
Keyboard Traps verletzen nicht nur WCAG-Kriterien, sondern können rechtliche Konsequenzen haben. Sie machen Websites in vielen Fällen völlig unbrauchbar für Menschen mit Behinderungen – ein klarer Fall von Diskriminierung.
3. Nutzererfahrung für alle verbessern
Tastatur-Navigation ist nicht nur für Menschen mit Behinderungen relevant. Power-User, Entwickler und alle, die effizienter arbeiten wollen, nutzen Tastatur-Shortcuts. Keyboard Traps frustrieren diese wertvollen Nutzergruppen unnötig.
Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.
6. Das Erfolgskriterium im Wortlaut der W3
Success Criterion 2.1.2 No Keyboard Trap (Level A)
If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.
Note: Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the web page (whether it is used to meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference.