Erfolgskriterien

WCAG 2.4.3 Fokusreihenfolge

Erfolgskriterium 2.4.3 verlangt, dass, wenn Inhalt sequenziell navigierbar ist, die Reihenfolge, in der Elemente den Tastaturfokus erhalten, einer Abfolge folgt, die Bedeutung und Bedienbarkeit bewahrt. Es ist ein Kriterium der Stufe A unter Richtlinie 2.4 (Navigierbar) – das interaktive Fokus-Pendant zur Anforderung an die Lesereihenfolge in 1.3.2 Sinnvolle Reihenfolge.

Wie sich eine kaputte Fokusreihenfolge anfühlt

Das Durchtabben einer Seite sollte sich durch interaktive Elemente in einer Abfolge bewegen, die angesichts dessen, was visuell auf dem Bildschirm ist, logisch sinnvoll ist – im Allgemeinen von oben nach unten, von links nach rechts (oder von rechts nach links bei RTL-Sprachen), der visuellen/logischen Struktur folgend, der ein sehender Nutzer natürlicherweise folgen würde. Springt der Fokus stattdessen unvorhersehbar – von einem Footer-Link direkt zu einem Header-Feld, oder überspringt visuell benachbarte Steuerelemente in einer durcheinandergewürfelten Reihenfolge –, verliert ein Tastaturnutzer jedes Gefühl dafür, "wo bin ich, und was kommt als Nächstes", was einfache Navigation in ein verwirrendes Ratespiel verwandelt.

Die häufigste Ursache

CSS-basierte visuelle Neupositionierung (Flexbox-/Grid-order, absolute Positionierung), die ändert, wo etwas erscheint, ohne seine tatsächliche Position im DOM zu ändern – da die Fokusreihenfolge im Allgemeinen der DOM-Reihenfolge folgt, unabhängig von der CSS-visuellen Platzierung, erzeugt eine Diskrepanz zwischen beiden genau diese Art verwirrender, unlogischer Tab-Abfolge. Dies ist derselbe zugrunde liegende Mechanismus, der 1.3.2-Fehler verursacht; die beiden Kriterien werden oft durch dieselbe Grundursache verletzt, nur durch zwei verschiedene Linsen betrachtet (Lesereihenfolge vs. Fokusreihenfolge).

Die andere häufige Ursache: manuelle Tabindex-Manipulation

Positive tabindex-Werte (tabindex="1", tabindex="5" usw.), die verwendet werden, um die Tab-Reihenfolge manuell zu steuern, erzeugen ihre eigene numerische Abfolge, die die natürliche DOM-Reihenfolge überschreibt – und in der Praxis erzeugt dies fast immer eine SCHLECHTERE, schwerer vorhersehbare Reihenfolge, als tabindex einfach auf seinem Standardwert zu belassen. Genau deshalb markiert axe-core jeden positiven Tabindex-Wert als Verstoßrisiko.

Die Lösung

Halten Sie von vornherein die DOM-Reihenfolge passend zur beabsichtigten logischen/visuellen Abfolge, statt zu versuchen, ein durcheinandergewürfeltes DOM nachträglich mit CSS-Neupositionierung oder manuellen Tabindex-Überschreibungen in Einklang zu bringen. Wenn ein visuelles Layout tatsächlich von der logischen Lese-/Fokusreihenfolge abweichen muss, ist das meist ein Zeichen dafür, dass sich die zugrunde liegende Markup-Struktur ändern muss, nicht nur mit tabindex geflickt werden sollte.

Häufige Fragen

Was ist WCAG 2.4.3 Fokusreihenfolge?

Ein Kriterium der Stufe A, das verlangt, dass der Tastaturfokus in einer logischen Reihenfolge durch die Seite wandert, die Bedeutung und Bedienbarkeit erhält.

Was verursacht Probleme mit der Fokusreihenfolge?

Positive tabindex-Werte, CSS, das Inhalte visuell umsortiert, oder Dialoge ohne Fokussteuerung – der Fokus springt dann unvorhersehbar.

Wie wird die Fokusreihenfolge geprüft?

Weitgehend manuell: Tabben Sie durch die Seite und prüfen Sie, ob der Fokus dem visuellen und logischen Ablauf folgt. Automatisierte Werkzeuge erkennen riskante Muster wie positive tabindex-Werte, können es aber nicht abschließend bewerten.