2.4.3 Fokusreihenfolge

1. Was ist das Ziel dieses Kriteriums?

Warst du schon mal auf einer Website und hast versucht, mit der Tabulatortaste durch die Elemente zu navigieren – nur um festzustellen, dass der Fokus wie ein hyperaktiver Pingpongball herumspringt? Vom Suchfeld zur Fußzeile, dann zurück zu einer Schaltfläche oben links und dann irgendwo ins Nirgendwo? Das ist frustrierend für alle – aber für Menschen, die auf die Tastatur angewiesen sind, kann es die Website völlig unbrauchbar machen.

Das Ziel von Erfolgskriterium 2.4.3 ist klar: Wenn man eine Seite der Reihe nach durchlaufen kann und die Reihenfolge für Bedeutung oder Bedienung wichtig ist, muss der Fokus die Elemente in einer Reihenfolge erreichen, die Sinn und Bedienbarkeit erhält. Kurz gesagt: Die Tab-Reihenfolge soll logisch und vorhersehbar sein – meist so, wie man die Seite auch lesen würde.

2. Was fordert das Erfolgskriterium genau?

Es geht darum, dass fokussierbare Elemente den Fokus in einer sinnvollen Reihenfolge erhalten, wenn man sich der Reihe nach durch die Seite bewegt – also mit der Tabulatortaste oder vergleichbaren Eingabemethoden.

Die wichtigsten Punkte:

Logische Reihenfolge: Interaktive Elemente wie Links, Schaltflächen und Formularfelder müssen in einer sinnvollen Reihenfolge erreichbar sein.

Mehrere richtige Lösungen: Oft gibt es mehrere sinnvolle Reihenfolgen – zum Beispiel zeilen- oder spaltenweise durch eine Tabelle. Wichtig ist, dass eine davon eingehalten wird.

Fokus- und Lesereihenfolge: Die Fokusreihenfolge muss nicht exakt der Reihenfolge im Quelltext entsprechen, solange Nutzer:innen die Seite verstehen und bedienen können. In der Praxis ist die Übereinstimmung aber der sicherste Weg.

Dynamische Inhalte: Werden Inhalte nachträglich eingefügt (z. B. per JavaScript), müssen sie sinnvoll in die bestehende Fokusreihenfolge eingebunden werden.

Eine Einschränkung: Gefordert ist eine sinnvolle Reihenfolge nur dort, wo die Reihenfolge Bedeutung oder Bedienung beeinflusst. Bei einer Seite mit wenigen, voneinander unabhängigen Elementen kann die Reihenfolge auch egal sein.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du füllst ein Online-Formular aus, aber anstatt von einem Feld zum nächsten zu springen, landest du plötzlich beim Kontrollkästchen für den Newsletter, dann beim Suchfeld oben, dann wieder bei einem Adressfeld. Du verlierst komplett den Überblick – obwohl du sehen kannst, was passiert.

Eine logische Fokusreihenfolge schafft Barrierefreiheit, weil sie:

• Menschen mit motorischen Einschränkungen hilft, die auf die Tastatur angewiesen sind und einen vorhersehbaren Weg durch die Seite brauchen,
• blinden und sehbehinderten Menschen Orientierung gibt, die mit Screenreadern arbeiten und sich auf die logische Struktur verlassen,
• Menschen mit Leseschwierigkeiten unterstützt, die verwirrt werden können, wenn der Fokus an unerwartete Stellen springt,
• Nutzer:innen von Bildschirmlupen hilft, die nur einen kleinen Ausschnitt der Seite sehen und sich ohne logische Reihenfolge schnell verirren.

Und nicht zuletzt: Sie macht Websites für alle intuitiver – auch für Menschen, die gelegentlich lieber die Tastatur als die Maus verwenden.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Eine logische Fokusreihenfolge ist meist keine Raketenwissenschaft – aber sie erfordert bewusste Planung. Hier die bewährtesten Praxistipps:

Grundregeln für eine gute Fokusreihenfolge:

• Folge der Lesereihenfolge: In Sprachen wie Deutsch oder Englisch also von oben nach unten und von links nach rechts.
• Halte Zusammengehöriges zusammen: Formularfelder eines Abschnitts sollten nacheinander fokussiert werden, nicht vermischt mit anderen Bereichen.
• Vertraue auf die Quelltextreihenfolge: Ohne Skripte und tabindex folgt der Fokus der Reihenfolge im HTML. Ist die logisch, ist meist auch der Fokus logisch.

Technische Umsetzung:

• HTML-Reihenfolge an der visuellen Reihenfolge ausrichten: CSS-Techniken wie order bei Flexbox, Grid-Platzierung oder absolute Positionierung ändern nur die Darstellung, nicht die Fokusreihenfolge. Weichen beide stark voneinander ab, springt der Fokus scheinbar wahllos.
• tabindex bewusst einsetzen:
  • tabindex="0" nimmt ein Element, das normalerweise nicht fokussierbar ist, in die natürliche Reihenfolge auf.
  • tabindex="-1" macht ein Element per Skript fokussierbar, ohne es in die Tab-Reihenfolge aufzunehmen.
  • Vermeide Werte größer als 0 – sie hebeln die natürliche Reihenfolge aus und sind kaum wartbar.
• Dynamische Inhalte richtig einbinden: Füge neue Elemente im Quelltext an sinnvoller Stelle ein – meist direkt nach dem Element, das sie ausgelöst hat.

Häufige Stolperfallen:

• Visuelle Umsortierung per CSS: Wenn du Elemente visuell umordnest, prüfe, ob die Fokusreihenfolge noch Sinn ergibt.
• Falsch umgesetzte modale Dialoge: Beim Öffnen muss der Fokus in den Dialog wechseln und dort bleiben, bis er geschlossen wird. Danach sollte er zu dem Element zurückkehren, das den Dialog geöffnet hat.
• Vergessene dynamische Inhalte: Aufklappmenüs, Akkordeons und ähnliche Elemente müssen an der richtigen Stelle in der Fokusreihenfolge auftauchen – und versteckte Inhalte dürfen keinen Fokus erhalten.

Eng verwandt sind Bedeutungstragende Reihenfolge, Fokus sichtbar und Keine Tastaturfalle.

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Eine logische Fokusreihenfolge ist nicht nur eine Anforderung der Barrierefreiheit – sie zahlt sich in mehreren Bereichen aus.

1. Bessere Nutzung für alle

Eine durchdachte Fokusreihenfolge macht deine Website für alle leichter bedienbar. Wenn sich Formulare intuitiv per Tastatur ausfüllen lassen, sinkt die Frustration und mehr Menschen schließen ihre Bestellung oder Anfrage ab. Besonders wichtig ist das für Online-Shops und komplexe Anwendungen.

2. Saubere Struktur

Barrierefreiheit ist kein direkter Rankingfaktor. Eine logische HTML-Reihenfolge, die meist auch eine gute Fokusreihenfolge bedeutet, macht deine Inhalte aber für Menschen und Maschinen leichter verständlich – ein indirekter Vorteil.

3. Entwicklungskosten senken

Eine von Anfang an gut strukturierte Seite ist wartungsfreundlicher und verursacht weniger Fehler. Stimmt die Fokusreihenfolge, sparst du dir nachträgliche Korrekturen und komplizierte JavaScript-Lösungen.

Und nicht zuletzt: 2.4.3 ist ein Level-A-Kriterium und damit Teil von WCAG 2.1 AA, auf die die Norm EN 301 549 verweist. Seit dem 28. Juni 2025 müssen unter anderem Online-Shops nach dem Barrierefreiheitsstärkungsgesetz (BFSG) diese Anforderungen erfüllen, öffentliche Stellen nach BITV 2.0 bzw. Landesrecht. Das ist eine allgemeine Information und keine Rechtsberatung.

6. Das Erfolgskriterium im Wortlaut des W3C

Success Criterion 2.4.3 Focus Order (Level A)

If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

Kurz gesagt: Wenn die Reihenfolge wichtig ist, muss der Tastaturfokus die Elemente so erreichen, dass Sinn und Bedienbarkeit erhalten bleiben.