WCAG 2.1.1 Tastatur

Das Erfolgskriterium 2.1.1 sorgt dafür, dass Menschen eine Website ohne Maus nutzen können: blinde Besucher mit Screenreader, Menschen mit Zittern oder eingeschränkter Handbeweglichkeit, Menschen mit Schaltern oder Sprachsteuerung, die eine Tastatur emulieren, und erfahrene Nutzer, die einfach lieber die Tastatur verwenden. Es gehört zur Konformitätsstufe A und ist Teil von EN 301 549 (Abschnitt 9.2.1.1), auf die sich der European Accessibility Act stützt. Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Alle Funktionen des Inhalts müssen über eine Tastaturschnittstelle bedienbar sein und dürfen nicht von bestimmten Zeitvorgaben für einzelne Tastenanschläge abhängen (zum Beispiel „zweimal schnell drücken“).

Die einzige Ausnahme gilt, wenn die zugrunde liegende Funktion eine Eingabe erfordert, die vom Pfad der Bewegung des Nutzers abhängt und nicht nur von den Endpunkten — zum Beispiel Freihandzeichnen. Die Ausnahme betrifft die Funktion, nicht die Eingabetechnik: Texteingabe per Handschrift nutzt einen Pfad, die Texteingabe selbst aber nicht, deshalb muss sie trotzdem per Tastatur funktionieren.

Maus, Touch oder andere Eingabemethoden zusätzlich anzubieten, ist in Ordnung und erwünscht.

Typische Fehler in Onlineshops

• ein Mega-Menü oder Kategorie-Dropdown, das sich nur bei Maus-Hover öffnet;
• Produktbildergalerien, Farbfelder oder Größenauswahlen aus div-Elementen mit Klick-Handlern und ohne Tastaturunterstützung;
• Preisbereich-Slider und Mengenzähler, die sich nicht mit den Pfeiltasten bewegen lassen;
• eine „Schnellansicht“ oder ein Mini-Warenkorb, der sich per Klick öffnet, aber nicht per Tastatur öffnen oder schließen lässt;
• ein Cookie-Banner oder Chat-Widget, dessen Buttons mit Tab nicht erreichbar sind;
• ein scrollbarer Bereich (Größentabelle, Bewertungsliste), der keinen Fokus erhalten kann, sodass Tastaturnutzer ihn nicht scrollen können.

So prüfen Sie es

Automatisch: Unser Checker markiert mehrere Tastaturmuster: scrollbare Bereiche, die keinen Fokus erhalten können, iframes mit interaktiven Inhalten, die aus der Tab-Reihenfolge entfernt sind, und serverseitige Imagemaps (Regeln in unserer Regelbibliothek). Ob jede Funktion per Tastatur funktioniert, kann er nicht erkennen — der Haupttest ist deshalb manuell.

Manuell: Legen Sie die Maus weg und gehen Sie einen echten Kauf durch. Bewegen Sie sich mit Tab und Umschalt+Tab, folgen Sie Links und drücken Sie Buttons mit Enter, nutzen Sie die Leertaste für Buttons und Checkboxen, die Pfeiltasten in Menüs, Slidern und Radiobutton-Gruppen und Esc zum Schließen von Dialogen. Öffnen Sie das Menü, filtern Sie eine Kategorie, wählen Sie eine Variante, legen Sie sie in den Warenkorb, lösen Sie einen Gutschein ein und gelangen Sie bis zum Zahlungsschritt. Jede Aktion, die mit der Maus möglich ist, muss auch so möglich sein.

So beheben Sie es

• Verwenden Sie native HTML-Elemente — <button>, <a href>, <input>, <select> —, sie sind standardmäßig per Tastatur bedienbar.
• Wenn Sie ein eigenes Widget bauen müssen, geben Sie ihm tabindex="0", eine ARIA-Rolle und Tasten-Handler nach dem Muster der WAI-ARIA Authoring Practices für dieses Widget.
• Lassen Sie Hover-Menüs auch bei Fokus oder mit Enter aufgehen und offen bleiben, solange der Fokus darin ist.
• Prüfen Sie Theme-Apps und Plugins (Bewertungen, Chat, Wunschzettel) — viele Tastaturprobleme stammen von Widgets von Drittanbietern.

Verwandte Kriterien

• 2.1.2 Keine Tastaturfalle — der Tastaturfokus muss eine Komponente immer verlassen können.
• 2.4.3 Fokus-Reihenfolge — die Reihenfolge der Tab-Stopps muss sinnvoll sein.
• 2.4.7 Fokus sichtbar — Nutzer müssen sehen, wo der Tastaturfokus ist.

Häufige Fragen

Was verlangt WCAG 2.1.1 Tastatur?

Jede Funktion des Inhalts muss über eine Tastaturschnittstelle bedienbar sein, ohne bestimmte Zeitvorgaben für einzelne Tastenanschläge. Maus- und Touch-Eingabe dürfen zusätzlich angeboten werden, aber nicht stattdessen.

Gibt es eine Ausnahme von der Tastaturanforderung?

Nur für Funktionen, bei denen die zugrunde liegende Aufgabe vom Pfad der Bewegung abhängt und nicht nur von Start- und Endpunkt, etwa Freihandzeichnen oder eine Unterschrift. Texteingabe per Handschrift zählt nicht, weil die Texteingabe selbst keinen Pfad braucht.

Kann ein automatisches Tool die Tastaturbedienbarkeit testen?

Nur teilweise. Ein Checker findet manche Muster, etwa scrollbare Bereiche, die keinen Fokus erhalten können. Ob jedes Menü, jeder Filter und jeder Checkout-Schritt wirklich mit Tab, Enter, Leertaste und Pfeiltasten funktioniert, müssen Sie manuell ausprobieren.