WCAG 2.4.3: Fokus-Reihenfolge

Wenn sich eine Seite sequenziell bedienen lässt, muss der Fokus die interaktiven Elemente in einer Reihenfolge durchlaufen, die Bedeutung und Bedienbarkeit erhält – üblicherweise die Lesereihenfolge. Ein Fokus, der kreuz und quer springt, macht Formulare zum Blindflug. (Englisch: Focus Order.)

Was verlangt das Kriterium?

Drei Praxis-Regeln decken es ab:

1. DOM-Reihenfolge = Sinn-Reihenfolge: Der Fokus folgt dem DOM. Wer per CSS visuell umsortiert, erzeugt Zickzack-Fokus.
2. Kein positives tabindex: tabindex="1" und höher hebeln die natürliche Ordnung aus und sind praktisch nicht wartbar. Erlaubt: tabindex="0" (fokussierbar machen) und tabindex="-1" (per Skript fokussierbar).
3. Fokus-Management bei Dynamik: Öffnet sich ein Dialog, wandert der Fokus hinein; schließt er, kehrt er zum Auslöser zurück. Erscheint neuer Inhalt nach einer Aktion, muss der Fokus sinnvoll weitergeführt werden – etwa bei „Mehr laden“.

Wen betrifft es besonders?

Tastatur- und Switch-Nutzer sowie sehbehinderte Nutzer, die dem Fokus mit starker Vergrößerung folgen – ein Sprung ans Seitenende wirft ihren Bildausschnitt ins Nirgendwo.

Richtig & falsch im Code

<!-- Falsch: positive tabindex-Werte „reparieren" die Optik -->
<input tabindex="3" id="ort" />
<input tabindex="1" id="name" />
<input tabindex="2" id="plz" />

<!-- Richtig: DOM in Sinn-Reihenfolge, kein tabindex nötig -->
<input id="name" />
<input id="plz" />
<input id="ort" />

// Richtig: Fokus-Rückgabe beim Schließen eines Dialogs
const opener = document.activeElement;
dialog.showModal();
dialog.addEventListener('close', () => opener.focus());

So testest du es

1. Tab-Durchlauf über die ganze Seite: Folgt der (sichtbare!) Fokus der Lesereihenfolge – ohne Sprünge, ohne Auslassungen?
2. Dialog-Probe: Overlay öffnen und schließen – landet der Fokus danach wieder auf dem Auslöser (und nicht am Seitenanfang)?
3. Code-Suche: jedes tabindex mit Wert ≥ 1 ist ein Befund.
4. Formulare rückwärts (Shift+Tab) prüfen – auch das muss konsistent sein.

Verwandte Themen

• 1.3.2 Bedeutungstragende Reihenfolge – dieselbe Wurzel im DOM
• 2.4.7 Fokus sichtbar – man muss die Reihenfolge auch sehen
• Dialoge & Modals – Fokus-Management im Muster