So prüfen Sie, ob Websites per Tastatur bedienbar sind

Das häufigste und schwerwiegendste Barrierefreiheits-Problem, das Websites aufweisen, ist die fehlende Tastaturbedienbarkeit – eine Website muss ohne Maus und nur mit der Tastatur zugänglich sein. Wie weit verbreitet dieses Lücke ist zeigt ein Test von Aktion Mensch, in dem 71 Online-Shops untersucht wurden, von denen aber nur 15 über die Tastatur bedienbar waren.

Warum ist Tastaturbedienbarkeit wichtig für Barrierefreiheit?

Tastaturzugänglichkeit ist aus mehreren Gründen notwendig:

• Personen mit Tremor, Muskelschwäche, eingeschränkter Fein­motorik oder einhändiger Nutzung können eine Maus nicht oder nur unter Schmerzen bedienen.
• Blinde und stark sehbehinderte Nutzer:innen navigieren überwiegend mit Screenreadern. Diese Assistenz­software koppelt ihre Kurzbefehle (Tab, Pfeil­navigation, Schnell­sprung­tasten u. a.) direkt an die Tastatur. Ohne wohldefinierten Fokus und steuer­bare Komponenten bleiben Inhalte für sie schlicht unerreichbar.
• Sprach­steuerung (Dragon NaturallySpeaking, Windows Spracherkennung) und Mund-/Augen­steuerungen „tun so, als ob“ sie Tastatur­befehle senden. Erst wenn eine Seite vollständig über Tasten bedienbar ist, funktioniert sie auch mit diesen Technologien.

Die Tastaturzugänglichkeit ist eng verbunden mit dem „Fokus-Indikator“ des ausgewählten Elements. Der Fokus kennzeichnet das aktuell aktive Element auf der Seite, und um es leicht erkennen zu können muss es deutlich hervorgehoben werden. In den beiden folgenden Beispielen wird es durch eine Umrandung bzw. eine Hintergrundfarbe genennzeichnet:

Es ist aus den folgenden Gründen wichtig, dass der Fokus deutlich hervorgehoben werden muss:

• Der sichtbare Fokus zeigt, wo sich die BenutzerIn gerade befindet. Ohne diese Rück­meldung wüsste man beim Navigieren mit der Tab-Taste (s.u.) nicht, welches Element als Nächstes aktiviert wird – das führt zu Verwirrung, Fehleingaben oder gar Abbruch der Interaktion.
• Tastaturereignisse (Enter, Leertaste, Pfeile, ESC …) wirken immer nur auf das aktuell fokussierte Element. Ist kein Fokus vorhanden – oder „steckt“ er im falschen Bereich – funktionieren Interaktionen schlicht nicht.
• Screenreader koppeln ihre Ausgabe an den Fokus. Wenn der Fokus springt, liest der Screenreader den neuen Kontext. Ein fehlender oder unsichtbarer Fokus macht Inhalte für blinde NutzerInnen praktisch unauffindbar.

Welche WCAG-Kriterien beziehen sich auf Tastaturbedienbarkeit?

Anforderungen an barrierefreie Websites werden im international verbreiteten Standard „Web Content Accessibility Guidelines“ spezifiziert. Er liegt in mehreren Versionen vor (aktuell ist Version 2.2) sowie mehreren „Konformitäts-Niveaus“ (von A bis AAA). Die Anforderungen sind in 86 sog. „Success Criteria“ beschrieben, die folgende Tabelle zeigt auf, welche davon die relevanten Kriterien für Tastaturbedienbarkeit sind.

Mit diesen Schritten testen Sie Websites auf Tastaturbedienbarkeit

Führen Sie einen automatischen Test durch

Automatisierte Test-Tools wie decareto können einige problematische Aspekte identifizieren, die verhindern dass eine Website nicht tastaturzugänglich ist:

• Fehlendes HTML-Attribut tabindex="-1" bei interaktivem Element (dies wird benötigt um den Fokus in einem normalerweise ausgeblendeten Element, etwa einen Dialog-Popup, zu gewährleisten).
• Fehlender oder ausgelöschter Fokus, etwa wenn in einer Website der Fokus-Indikator aus gestalterischen Gründen absichtlich unterdrückt wird.

Die Mehrzahl der Probleme mit Tastaturbedienbarkeit erfordern allerdings manuelles Testing, diese werden in den nächsten Abschnitten beschrieben.

Existiert ein Link zum Hauptinhalt?

Öffnen Sie die Seite und klicken Sie ein bis zweimal die Tab-Taste. Springt der Fokus zuerst auf einen sichtbaren „Zum Inhalt“-Link? (WCAG 2.4.1).

Negativbeispiel: Der Seitentitel bekommt den Fokus, aber es ist kein Überspring-Link vorhanden.

Navigieren Sie mit der Tab-Taste

Klicken Sie Tab und Shift-Tab um vorwärts oder rückwärts zu navigieren. Ist erkennbar, welches Element den Fokus hat, und folgt die Reihenfolge der natürlichen Lese-Logik? Wird nichts Wesentliches übersprungen (WCAG 2.4.3)?

Negativbeispiel: Der Fokus springt aus der Haupt­navigation direkt in den Footer.

Prüfen Sie den Fokus-Indikator

Beobachten Sie, wie der Fokus kenntlich gemacht wird. Ist er gut erkennbar? Der Indikator sollte eine mindestens 2 px breite Linie oder Fläche mit 3:1-Kontrast sein (WCAG 2.4.7 & WCAG 2.4.11). Die beiden Screenshots ganz oben auf der Seite zeigen dies anschaulich.

Negativbeispiel: Der Indikator ist nur eine hauchdünne, graue Outline oder auf dunklem Hintergrund unsichtbar.

Ausklappbare Menüs

Wenn die Website eine Navigation hat, die aufklappbar ist (durch Klick oder durch „Hover“, also Überfahren mit der Maus), dann müssen diese Menüs mit der Tastaur zu öffnen sein.

Identifzieren Sie alle Navigationselemente auf der Seite, die durch Hover oder Klick ein Menü öffnen. Gehen Sie mit Tab auf jeden Menüpunkt und versuchen Sie ihn durch Enter oder Pfeil-runter / Pfeil-hoch zu öffnen. Bleibt der Fokus im geöffneten Menü? Lässt es sich mit Esc schließen? (WCAG 1.4.13, WCAG 2.1.1)

Negativbeispiel: Das Submenü erscheint nur mit Maus-Hover, man kann es über die Tastatur nicht öffnen oder schließen.

Prüfen Sie Formulare

Barrierefreie Formulare können fogendermaßen mit der Tastatur bedient werden:

• Wechseln zwischen den Formularelementen mit Tab und Shift-Tab
• Auswahl von Radiobuttons mit Pfeil-runter / Pfeil-hoch
• Auswahl einer Checkbox mit Space
• Durchlaufen von Dropdown-Optionen mit Pfeil-runter / Pfeil-hoch
• Bestätigen einer Dropdown-Auswahl mit Enter
• Schließen eines geöffneten Dropdowns mit Esc
• Absenden des Formulars mit Enter

Prüfen Sie, ob alle Formulare auf diese Weise bedienbar sind (WCAG 2.1.1)

Prüfen Sie Dialoge und Popups

Identifizieren Sie alle Dialoge die als Popup geöffnet werden und sich vor den Hintergrud legen. Sie müssen mit der Tastatur geöffnet und geschlossen werden können. Innerhalb eines geöffneten Dialogs muss es möglich sein, alle Elemente mit Tab zu erreichen.

• Kann der Dialog mit Enter geöffnet werden?
• Kann er mit Esc geschlossen werden?
• Springt der Fokus beim Öffnen in den Dialog?
• Beim mehrfachen Benutzen von Tab muss der Fokus im Dialog „gefangen“ sein.
• Geht der Fokus nach dem Schließen ordnungsgemäß zurück?

Negativbeispiel: In einem Dialog darf der Fokus beim Verwenden von Tab nicht plötzlich zur Seite wechseln oder gar zu Elementen die hinter dem Dialog liegen.

Prüfen Sie Drag-and-Drop-Aktionen

Drag-and-drop wird gelegentlich verwendet, um bspw. Listen umzusortieren. Für Bedienung mit der Tastatur muss es dazu eine Alternative geben, mit der bspw. ein Element ausgewählt werden kann, und die Sortierung durch Elemente für „nach oben“ und „nach unten“ durchgeführt wird (WCAG 2.5.7)