Tastaturfalle einfach erklärt
Eine Tastaturfalle entsteht, wenn Nutzer sich auf einer Website nicht vollständig mit der Tastatur bewegen können und an einer Stelle „gefangen“ werden. Häufig passiert dies bei Dialogfeldern, Menüs oder eingebetteten Inhalten, wenn der Fokus nicht korrekt gesteuert wird. Besonders für Menschen, die keine Maus verwenden können, stellt das eine erhebliche Hürde dar. Solche Tastaturfallen müssen bei barrierefreien Websites vermieden werden.
Inhalt
Was ist eine Tastaturfalle?
Eine Tastaturfalle tritt auf, wenn die Navigation per Tastatur unterbrochen wird. Das ist zum Beispiel dann der Fall, wenn das aktuelle Element oder ein Bereich nicht mit den üblichen Tasten wie Tab oder Escape verlassen werden kann. Oft treten Unterbrechungen der Navigationsreihenfolge bei dynamischen Anwendungen durch Plugins und Java Script auf. Typische Beispiele sind:
- Modale Dialoge: Modale Dialoge sind Fenster, die im Vordergrund geöffnet werden, beispielsweise zur Eingabe oder Anzeige von Informationen. Eine Tastaturfalle entsteht, wenn der Fokus innerhalb des Dialogs bleibt und nicht zum restlichen Inhalt der Seite zurückgeführt werden kann.
-
- Beispiel: Ein Pop-up für Newsletter-Anmeldungen, das sich nach dem Öffnen nicht schließen lässt, weil der Fokus nur auf den Eingabefeldern und Buttons innerhalb des Dialogs bleibt.
- Lösung: Beim Öffnen eines modalen Dialogs sollte der Fokus automatisch auf das erste interaktive Element im Dialog gesetzt werden. Beim Schließen des Dialogs muss der Fokus zurück zum auslösenden Element (z. B. Button) springen.
- Iframe-Inhalte: Iframes werden oft genutzt, um externe Inhalte wie Videos, Karten oder Social-Media-Widgets einzubetten. Eine Tastaturfalle entsteht, wenn der Fokus im eingebetteten Bereich hängen bleibt, weil keine Möglichkeit besteht, den Iframe zu verlassen.
- Beispiel: Benutzer können in einem eingebetteten Video-Player landen, die Bedienung jedoch nicht fortsetzen oder den Player verlassen.
- Lösung: Der Fokus sollte beim Eintritt in den Iframe explizit steuerbar sein und die Möglichkeit bieten, ihn mit der Tab-Taste zu verlassen.
- Dynamische Menüs: Dynamische oder Drop-down-Menüs sind häufig Teil von Navigationsleisten. Eine Tastaturfalle entsteht, wenn Benutzer das Menü zwar mit der Tastatur öffnen, es aber nicht vollständig bedienen oder wieder verlassen können.
- Beispiel: Elemente eines Navigationsmenüs sind nur per Maus auswählbar, und die Navigation innerhalb der Menüstruktur oder auch das Schließen des Menüs ist nicht möglich.
- Lösung: Stelle sicher, dass Menüs per Tastatur geöffnet, durchlaufen und geschlossen werden können, z. B. mit Enter, Tab, Pfeiltasten oder Escape.
Diese Situationen verhindern eine vollständige Nutzung der Website und sind daher aus Sicht der Barrierefreiheit kritisch.
Warum sind Tastaturfallen ein Problem?
Die WCAG-Richtlinie 2.1.2 „Keine Tastaturfalle“ hebt Tastaturfallen als entscheidendes Kriterium für barrierefreies Webdesign hervor. Tastaturfallen sind besonders für Menschen mit motorischen Einschränkungen, Screenreader-Nutzer oder Personen, die assistive Technologien verwenden, problematisch. Tastaturnutzer werden gezwungen, eine Seite neu zu laden, die Zurückfunktion im Browser zu betätigen oder auch auf eine andere Website zu wechseln.
Tastaturfallen schränken somit die Barrierefreiheit und Nutzerfreundlichkeit ein. Außerdem gibt es rechtliche Risiken, denn Websites, die nicht barrierefrei sind, verstoßen möglicherweise gegen gesetzliche Vorgaben wie die BITV.
Wie vermeidest Du Tastaturfallen?
Um Tastaturfallen auf Deiner Website zu vermeiden, solltest Du folgende Maßnahmen umsetzen:
- Tastaturanweisungen: Informiere Nutzer, wenn besondere (nicht offensichtliche) Tastenkombinationen notwendig sind, um eine Tastaturfalle zu verlassen.
- Fokusmanagement: Sorge dafür, dass der Fokus dynamisch auf relevante Elemente wechselt und Nutzer ihn stets zurücksetzen können.
- Escape-Funktion: Erlaube es Nutzern, Dialoge oder Menüs jederzeit mit der „Escape“-Taste zu schließen.
- Tab-Index optimieren: Stelle sicher, dass interaktive Elemente in logischer Reihenfolge per Tab-Taste erreichbar sind.
- Vollständige Navigation: Ergänze „Skip-to-Content“-Links, um direkt zum Hauptinhalt springen zu können.
- Fokusindikatoren nutzen: Mach sichtbar, welches Element gerade im Fokus ist. Leite den Fokus außerdem beim Öffnen auf ein Dialogfeld und beim Schließen zurück.
- Dropdown-Menüs: Achte darauf, dass Menüs vollständig mit der Tastatur bedienbar sind, z. B. mit Tab-, Pfeil- und Escape-Tasten.
- Regelmäßige Tests: Führe Tests mit Tastatursteuerung und assistiven Technologien durch, um mögliche Probleme frühzeitig zu erkennen und zu beheben.
Weiterführende Links: