WCAG 2.1.2 Keine Tastaturfalle

Das Erfolgskriterium 2.1.2 schützt alle, die mit der Tastatur navigieren — Screenreader-Nutzer, Menschen mit motorischen Einschränkungen, Menschen mit Schaltersteuerung —, davor, in einem Teil der Seite festzustecken. Es gehört zur Konformitätsstufe A und ist Teil von EN 301 549 (Abschnitt 9.2.1.2). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Wenn sich der Tastaturfokus per Tastatur in eine Komponente bewegen lässt, muss es auch möglich sein, den Fokus nur mit der Tastatur wieder wegzubewegen.

Erfordert das Verlassen mehr als unveränderte Pfeiltasten, Tab oder andere übliche Ausstiegsmethoden, muss der Nutzer darüber informiert werden, wie er herauskommt (zum Beispiel „Drücken Sie Strg+M, um den Editor zu verlassen“).

Die WCAG ergänzen einen Hinweis: Weil eine Falle die Nutzung der ganzen Seite verhindern kann, müssen alle Inhalte der Seite dieses Kriterium erfüllen, auch eingebettete Inhalte von Drittanbietern (das ist Konformitätsanforderung 5, Nicht-Beeinträchtigung).

Den Fokus absichtlich einzugrenzen, ist erlaubt. Ein modaler Dialog, der Tab während er geöffnet ist in sich hält, ist in Ordnung, solange der Nutzer ihn per Tastatur schließen kann.

Typische Fehler in Onlineshops

• ein eingebettetes Video, ein 3D-Produktviewer oder eine Karte, die Tab abfängt und nie wieder freigibt;
• ein Chat- oder Support-Widget in einem iframe, in das der Fokus gelangt, aber nicht mehr zur Seite zurückkehren kann;
• ein „Focus Trap“-Skript in einem Pop-up (Newsletter, Rabattrad, Altersabfrage) ohne Möglichkeit, es per Tastatur zu schließen;
• ein Rich-Text-Feld für Bewertungen, das Tab zum Einrücken nutzt, ohne dem Nutzer zu sagen, wie er es verlässt;
• ein Datumswähler im Checkout, der den Fokus im Kalenderraster festhält.

So prüfen Sie es

Automatisch: Für dieses Kriterium gibt es keine axe-core-Regel. Ob der Fokus eine Komponente verlassen kann, hängt davon ab, wie Skripte auf Tasten reagieren — das kann ein Scan nicht zuverlässig simulieren, deshalb ist eine manuelle Prüfung nötig.

Manuell: Beginnen Sie oben auf der Seite und drücken Sie wiederholt Tab, bis Sie den Footer erreichen, dann mit Umschalt+Tab zurück nach oben. Stellen Sie sicher, dass Sie jeden eingebetteten Player, jedes iframe, Pop-up und Widget in beide Richtungen durchlaufen. Öffnen Sie jeden Dialog und probieren Sie Esc und den Schließen-Button. Wenn Sie feststecken, notieren Sie die Stelle; bietet die Komponente eine spezielle Ausstiegstaste, prüfen Sie, ob sie auf dem Bildschirm erklärt wird.

So beheben Sie es

• Fangen Sie Tab und Umschalt+Tab nicht ab, es sei denn, Sie halten den Fokus bewusst in einem geöffneten modalen Dialog.
• Jeder modale Dialog und jedes Pop-up braucht einen fokussierbaren Schließen-Button und sollte sich mit Esc schließen lassen; setzen Sie den Fokus danach auf das Bedienelement zurück, das ihn geöffnet hat.
• Testen Sie Einbettungen von Drittanbietern, bevor Sie sie einbauen, und ersetzen oder kapseln Sie solche, die den Fokus festhalten.
• Braucht eine Komponente Tab wirklich selbst (ein Code- oder Texteditor), zeigen Sie eine kurze Anleitung, wie man sie verlässt.

Verwandte Kriterien

• 2.1.1 Tastatur — jede Funktion muss per Tastatur funktionieren.
• 2.4.3 Fokus-Reihenfolge — der Fokus muss sich in einer logischen Reihenfolge bewegen.
• 2.4.11 Fokus nicht verdeckt (Minimum) — das fokussierte Element darf nicht vollständig verdeckt sein.

Häufige Fragen

Was ist eine Tastaturfalle?

Eine Stelle auf der Seite, in die der Tastaturfokus hineingelangt, aus der er aber per Tastatur nicht mehr herauskommt, zum Beispiel ein eingebetteter Videoplayer oder ein Widget, das die Tab-Taste abfängt. Der Nutzer steckt fest und muss die Seite oft neu laden.

Ist ein modaler Dialog, der den Fokus festhält, eine Tastaturfalle?

Nein, solange der Nutzer ihn verlassen kann, zum Beispiel mit Esc oder über einen erreichbaren Schließen-Button. Den Fokus in einem geöffneten modalen Dialog zu halten, ist ein empfohlenes Muster; eine Falle ist es erst, wenn es keinen Ausweg gibt.

Warum gilt 2.1.2 für jeden Teil der Seite?

Weil eine einzige Falle die ganze Seite blockieren kann. Die WCAG führen 2.1.2 unter ihrer Anforderung zur Nicht-Beeinträchtigung, daher müssen alle Inhalte es erfüllen, auch solche, auf die Sie sich für die Konformität nicht stützen.