WCAG 3.2.1 Bei Fokus

Das Erfolgskriterium 3.2.1 hält die Tastaturnavigation vorhersehbar. Menschen, die eine Tastatur, einen Schalter oder einen Screenreader nutzen, bewegen sich durch eine Seite, indem sie ein Element nach dem anderen fokussieren. Öffnet das Fokussieren eines Elements plötzlich eine neue Seite oder wirft den Cursor an eine andere Stelle, verlieren sie den Überblick. Es gehört zur Konformitätsstufe A und ist Teil von EN 301 549 als Abschnitt 9.3.2.1. Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Wenn eine Komponente der Benutzeroberfläche den Fokus erhält, darf sie keinen Kontextwechsel auslösen. Die WCAG definieren Kontextwechsel als größere Änderungen, die Nutzer desorientieren können, wenn sie ohne ihr Wissen geschehen: Änderungen des User Agents, des Viewports, des Fokus oder von Inhalten, die die Bedeutung der Seite verändern. Beispiele sind das Öffnen eines neuen Fensters, das Verschieben des Fokus auf eine andere Komponente und die Navigation zu einer neuen Seite.

Eine Inhaltsänderung ist nicht immer ein Kontextwechsel. Ein Menü aufzuklappen, einen Hinweis zu zeigen oder ein Feld bei Fokus hervorzuheben, ist erlaubt. Weitere Ausnahmen gibt es nicht.

Typische Fehler in Onlineshops

• ein Newsletter- oder Hilfe-Pop-up öffnet sich und reißt den Fokus an sich, sobald ein Tastaturnutzer in ein Formularfeld tabbt;
• das Fokussieren einer Kategorie im Menü navigiert direkt zur Kategorieseite;
• das Fokussieren eines Produkt-Vorschaubilds öffnet ein Galeriefenster;
• ein Skript nimmt einem Feld den Fokus, sobald es ihn erhält, sodass der Nutzer nicht hineintippen kann;
• das Tabben auf den Sprach- oder Währungsumschalter lädt die Seite neu.

So prüfen Sie es

Automatisch: Unser Checker hat für dieses Kriterium keine Regel. Ob der Fokus eine Navigation, ein Pop-up oder einen Fokussprung auslöst, hängt von Skripten und von den Erwartungen des Nutzers ab, deshalb ist eine manuelle Prüfung nötig.

Manuell: Legen Sie die Maus weg und drücken Sie Tab durch die ganze Seite: Header, Menü, Filter, Produktkarten, Formulare und Footer. Gehen Sie mit Umschalt+Tab zurück. Notieren Sie an jedem Halt, ob außer der Fokusbewegung etwas passiert ist: eine neue Seite, ein neues Fenster oder ein neuer Tab, ein Dialog oder ein Fokus, der woandershin springt. Wiederholen Sie das auf den Checkout- und Kontoseiten.

So beheben Sie es

• Lösen Sie Navigation und Dialoge bei Aktivierung aus (Klick, Enter, Leertaste), nicht bei focus- oder focusin-Events.
• Zeigen Sie Hilfe als Text im Inhalt oder als Tooltip, der den Fokus nicht übernimmt.
• Öffnen Sie bei Mega-Menüs Untermenüs gern bei Fokus, wechseln Sie aber erst zu einer neuen Seite, wenn ein Link aktiviert wird.
• Entfernen Sie Skripte, die blur() auf fokussierten Bedienelementen aufrufen.

Verwandte Kriterien

• 3.2.2 Bei Eingabe — dieselbe Regel für das Ändern eines Werts.
• 2.4.3 Fokus-Reihenfolge — der Fokus bewegt sich in einer sinnvollen Reihenfolge.
• WCAG-2.2-Checkliste — alle Kriterien der Stufen A und AA auf einen Blick.

Häufige Fragen

Was ist ein Kontextwechsel in den WCAG?

Eine größere Änderung, die einen Nutzer, der nicht damit rechnet, desorientieren kann: das Öffnen eines neuen Fensters oder einer neuen Seite, das Verschieben des Fokus auf eine andere Komponente oder eine Änderung des Inhalts, die die Bedeutung der Seite verändert.

Ist ein Tooltip oder Dropdown bei Fokus nach 3.2.1 erlaubt?

Ja, wenn es nur eine Inhaltsänderung ist. Ein Menü, das aufklappt, oder ein Hinweis, der erscheint, ist in Ordnung; ein Fokus, der wegspringt, eine neue Seite oder ein neues Fenster nicht.

Kann ein automatisches Tool 3.2.1 prüfen?

Nein. Ob sich etwas ändert, wenn ein Element den Fokus erhält, hängt von Skripten ab und muss manuell getestet werden, indem man die Seite mit Tab durchgeht.