Tastaturnavigation bedeutet, dass eine Website ohne Maus allein mit der Tastatur (Tab, Enter, Pfeiltasten) durchsucht und bedient werden kann. Sie ist eine Grundanforderung für Menschen mit eingeschränkter Motorik und für Screenreader-Nutzer. Die WCAG verlangen, dass alle Funktionen per Tastatur bedienbar sind, der Tastaturfokus sichtbar ist und Nutzer in keiner Komponente gefangen bleiben.
Das WCAG-Prinzip der Bedienbarkeit definiert die vollständige Tastaturbedienbarkeit als Grundanforderung. Zwei Dinge gehören zwingend dazu: ein sichtbarer Fokusindikator, der zeigt, wo sich der Tastaturfokus gerade befindet, und das Fehlen von Tastaturfallen, die Nutzer in einer Komponente einsperren. Jede Interaktion, einschließlich Menüs, Modals, Formularschritten und eigenen Komponenten, muss allein mit Tab, Shift+Tab, Enter, Leertaste und Pfeiltasten abgeschlossen werden können. Probleme entstehen meist in selbst gebauten Komponenten: Buttons aus div-Elementen erscheinen nie in der Tab-Reihenfolge, eigene Aufklappmenüs ignorieren Pfeiltasten, und beim Schließen eines Modals geht der Fokus verloren.
Das Entfernen des Fokusrahmens per CSS ist eine verbreitete und schädliche Gewohnheit; ohne Fokusindikator wissen Tastaturnutzer nicht, wo sie sich auf der Seite befinden. Skip-Links, die wiederkehrende Menüs überspringen, bringen Tastaturnutzer auf langen Seiten schnell zum Hauptinhalt. Zum Testen braucht es kein Spezialwerkzeug: Legen Sie die Maus beiseite und versuchen Sie, Ihre Website komplett mit der Tastatur zu bedienen. Sie sollten jedes interaktive Element erreichen, jederzeit sehen, wo Sie sind, und jeden Ablauf wie Registrierung, Kauf oder Formularversand abschließen können. Automatische Scans finden einen Teil der Fokusprobleme; der Rest zeigt sich in diesem kurzen manuellen Test. Korrekturen gehören auf Komponentenebene in den Quellcode.
Häufig gestellte Fragen
Wie testet man die Tastaturnavigation?
Legen Sie die Maus beiseite und bedienen Sie die Website nur mit der Tastatur: mit Tab vorwärts, mit Shift+Tab zurück, mit Enter und Leertaste aktivieren, in Menüs und Tabs die Pfeiltasten testen. Beantworten Sie drei Fragen: Erreiche ich jedes interaktive Element? Sehe ich, wo der Fokus ist? Kann ich kritische Abläufe wie Registrierung und Kauf abschließen? Achten Sie besonders darauf, dass der Fokus beim Öffnen eines Modals hinein- und beim Schließen zurückspringt.
Warum ist der Fokusindikator wichtig?
Der Fokusindikator ist das Ortsgefühl des Tastaturnutzers auf der Seite: Zeigt man nicht, welches Element ausgewählt ist, navigiert der Nutzer blind. Das Zurücksetzen der outline-Eigenschaft aus Designgründen ist deshalb ein schwerer Barrierefreiheitsfehler. Richtig ist, den Indikator nicht zu entfernen, sondern einen kontrastreichen Fokusstil im Einklang mit der Marke zu gestalten. Die WCAG definieren sichtbaren Tastaturfokus als ausdrückliche Anforderung.
Dieser Inhalt dient nur zur Information und stellt keine Rechtsberatung dar.