Der Tastaturtest ist die aufwendigste Prüfung, die keine Werkzeuge braucht, und die, die die meisten echten Barrieren findet. Maus weglegen, mit der Tabulatortaste durch die Seite gehen. Was dabei nicht funktioniert, ist ein Fehler.
Die Anforderungen
Alles erreichbar. Jedes Bedienelement muss mit der Tastatur erreichbar sein: Links, Schaltflächen, Formularfelder, Menüpunkte, Schließen-Schaltflächen in Überlagerungen, Elemente in Bilderkarussells.
Alles auslösbar. Erreichbar genügt nicht. Was durch Klick funktioniert, muss auch durch die Eingabetaste oder die Leertaste funktionieren.
Fokus sichtbar. In jedem Zustand muss erkennbar sein, wo der Fokus steht, mit ausreichendem Kontrast gegen die Umgebung.
Reihenfolge nachvollziehbar. Die Reihenfolge folgt der Leseordnung. Ein Sprung vom Kopfbereich in den Fußbereich und zurück ist ein Fehler.
Keine Fokusfalle. Aus jedem Bereich muss man wieder heraus, ohne die Seite neu zu laden.
Fokus nicht verborgen. Der fokussierte Bereich darf nicht hinter einer festen Kopfzeile oder einer Überlagerung liegen.
Der Fokus: das häufigste Problem
Browser markieren fokussierte Elemente von sich aus. Viele Themes entfernen diese Markierung, weil sie beim Klicken mit der Maus als störend empfunden wird.
Die richtige Lösung ist nicht das Entfernen, sondern das Gestalten. Moderne Browser unterscheiden zudem, ob der Fokus durch Tastatur oder Maus entstanden ist, sodass die Markierung nur bei Tastaturbedienung erscheint.
Anforderungen an eine brauchbare Markierung:
- Mindestens 2 Pixel dick, mit etwas Abstand zum Element
- Kontrast von mindestens 3 zu 1 gegen den Hintergrund
- In einer Farbe, die gegen alle vorkommenden Flächenfarben funktioniert. Häufig ist das nicht die Markenfarbe
- Auch auf farbigen Flächen und auf dunklem Grund erkennbar
Der letzte Punkt wird oft übersehen: Eine blaue Fokusmarkierung auf einem blauen Abschnitt ist unsichtbar.
Die Sprungmarke
Ein Link am Anfang des Dokuments, der die Navigation überspringt und direkt zum Hauptinhalt führt. Für Tastaturnutzer ist er der Unterschied zwischen zwei Tastendrücken und dreißig.
Er darf visuell verborgen sein, muss aber bei Fokussierung sichtbar werden. Eine Sprungmarke, die dauerhaft unsichtbar bleibt, hilft niemandem, weil man nicht weiß, dass sie da ist.
Menüs
Ausklappmenüs sind der zweite große Problembereich.
Nur auf Überfahren reagierende Menüs sind mit der Tastatur nicht bedienbar und auf Touchgeräten ebenfalls nicht. Sie brauchen eine Variante, die auf Fokus oder Klick reagiert.
Mobile Drawer-Menüs brauchen: eine Schaltfläche mit erkennbarer Beschriftung, einen Zustand, der maschinenlesbar angibt, ob das Menü offen ist, den Fokus im geöffneten Menü, Schließen über die Escape-Taste, und Fokusrückgabe auf die öffnende Schaltfläche beim Schließen.
Der häufigste Fehler: Das Menü ist geschlossen, aber seine Links sind weiterhin fokussierbar. Man tabbt dann durch unsichtbare Elemente. Ausgeblendete Bereiche müssen so ausgeblendet werden, dass sie aus der Fokusreihenfolge verschwinden, nicht nur optisch unsichtbar sind.
Überlagerungen und Dialoge
Ein Dialog, ein Bildbetrachter oder ein Einwilligungsbanner braucht:
- Fokus beim Öffnen in den Dialog
- Fokus innerhalb des Dialogs gefangen, solange er offen ist
- Schließen über Escape und über eine sichtbare Schaltfläche
- Fokusrückgabe auf das auslösende Element beim Schließen
- Der Hintergrund darf nicht bedienbar sein
Punkt 2 klingt wie eine Fokusfalle, ist aber das Gegenteil: Solange ein Dialog offen ist, gehört der Fokus hinein. Eine Falle ist es nur, wenn Punkt 3 fehlt.
Einwilligungsbanner verletzen diese Punkte besonders häufig. Und da das Impressum ohne Einwilligung erreichbar sein muss, ist ein Banner, der die Seite vollständig blockiert, ein doppeltes Problem. Siehe Cookie-Banner.
Der Testablauf
- Maus weglegen. Nicht danach greifen.
- Auf der Startseite mit Tab durchgehen. Bei jedem Schritt fragen: Sehe ich, wo ich bin?
- Die Sprungmarke suchen. Erscheint sie beim ersten Tab?
- Das Menü öffnen, darin navigieren, mit Escape schließen. Wo ist der Fokus danach?
- Ein Formular vollständig ausfüllen und absenden, nur mit der Tastatur.
- Eine Fehlermeldung erzeugen. Wird der Fokus zum betroffenen Feld geführt?
- Ein Bild in einer Galerie öffnen und schließen.
- Bis zum Seitenende tabben. Kommen unsichtbare Elemente vor?
- Auf einer Unterseite mit Tabelle oder Karussell wiederholen.
Zwanzig Minuten für diese neun Schritte, und man hat mehr gefunden als jedes automatisierte Werkzeug liefert. Der vollständige Prüfablauf steht in Barrierefreiheit testen.