WCAG 3.2.1: Bei Fokus

Wenn ein Element den Fokus erhält, darf das allein keinen Kontextwechsel auslösen: kein neues Fenster, kein Formular-Submit, kein Fokus-Diebstahl, kein Seitenwechsel. Durchtabben muss gefahrlos sein – ansehen ist nicht anfassen. (Englisch: On Focus.)

Was verlangt das Kriterium?

„Kontextwechsel“ meint die großen Änderungen: neues Fenster/Tab, Wechsel der Seite, Fokus-Versetzung auf ein anderes Element, komplette Neuanordnung des Inhalts. Erlaubt bei Fokus sind dagegen unaufdringliche Anzeigen ohne Kontextwechsel: ein Tooltip erscheint, ein Feld hebt sich hervor, ein Untermenü klappt (mit Bedacht) auf – solange der Fokus bleibt, wo er ist, und nichts „umspringt“.

Die Klassiker der Verstöße: Ein select, das schon beim Pfeiltasten-Fokussieren einer Option navigiert; ein Feld, das bei Fokus sofort ein Modal öffnet; ein Skript, das den Fokus beim Durchtabben zwanghaft auf das „wichtige“ Feld zurückzieht (zugleich eine Tastaturfalle).

Wen betrifft es besonders?

Tastaturnutzer müssen durch alles hindurchtabben – auch durch Elemente, die sie nicht aktivieren wollen. Screenreader-Nutzer erkunden fokussierend; für Menschen mit kognitiven Einschränkungen sind unvorhersehbare Sprünge der schnellste Weg zur Desorientierung. Auch Vergrößerungs-Nutzer verlieren bei ungewollten Kontextwechseln ihren Ausschnitt.

Richtig & falsch im Code

// Falsch: Fokus genügt, um zu navigieren
document.querySelector('#land').addEventListener('focus', () => {
  window.location.href = '/laenderauswahl.html';
});

// Richtig: Aktion erst bei bewusster Aktivierung
document.querySelector('#land-dialog-oeffnen').addEventListener('click', () => {
  dialog.showModal();
});

Faustregel: focus-Handler dürfen zeigen, nie wechseln. Alles, was navigiert, absendet oder Fokus versetzt, gehört an click, change mit Bestätigung oder einen expliziten Button – siehe auch das Nachbar-Kriterium 3.2.2 „Bei Eingabe“.

So testest du es

1. Komplett durchtabben – von ganz oben bis ganz unten, ohne Enter zu drücken: Bleibt die Seite still? Kein Popup, kein Sprung, kein Submit?
2. Auch rückwärts (Shift+Tab) und durch Formulare.
3. Code-Suche nach addEventListener('focus' mit Navigations- oder Fokus-Logik.

Verwandte Themen

• 3.2.2 Bei Eingabe – dieselbe Regel für Eingaben
• 2.4.3 Fokus-Reihenfolge – wohin der Fokus gehört
• Tooltips & Popover – erlaubte Fokus-Anzeigen richtig bauen