WCAG 2.4.3 Fokus-Reihenfolge

Das Erfolgskriterium 2.4.3 sorgt dafür, dass Tastatur- und Screenreader-Nutzer die interaktiven Elemente einer Seite in einer sinnvollen Reihenfolge erreichen, damit sie die Seite verstehen und bedienen können. Es gehört zur Konformitätsstufe A und ist Teil von EN 301 549 (Abschnitt 9.2.4.3). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Wenn eine Webseite sequenziell navigiert werden kann (zum Beispiel mit Tab) und die Navigationsreihenfolge Bedeutung oder Bedienung beeinflusst, erhalten fokussierbare Komponenten den Fokus in einer Reihenfolge, die Bedeutung und Bedienbarkeit erhält.

Die Fokus-Reihenfolge muss das visuelle Layout nicht pixelgenau abbilden. Ein Verstoß liegt vor, wenn die Reihenfolge Inhalte verwirrend oder unbenutzbar macht. Vom W3C dokumentierte Fehler sind unter anderem:

• mit tabindex eine Reihenfolge zu erzeugen, die Bedeutung oder Bedienung zerstört;
• Dialoge oder Menüs in der Fokus-Reihenfolge weit entfernt von dem Bedienelement zu platzieren, das sie öffnet.

Typische Fehler in Onlineshops

• tabindex="1", "2" … auf Header-Elementen, sodass der Fokus herumspringt, bevor er die normale Reihenfolge erreicht;
• ein CSS-Layout (Flexbox order, Grid-Platzierung), das „In den Warenkorb“ neben dem Preis zeigt, es im DOM aber ans Ende setzt, hinter Bewertungen und ähnliche Produkte;
• ein Pop-up für Größentabelle oder Schnellansicht, das ans Ende der Seite angehängt wird, sodass der Fokus nicht hineinwandert und der Nutzer die ganze Seite durchtabben muss, um es zu erreichen;
• nach dem Schließen der Warenkorb-Schublade springt der Fokus an den Seitenanfang, statt zum Warenkorb-Button zurückzukehren;
• Checkout-Felder in einer anderen Reihenfolge als der sichtbaren (Postleitzahl vor der Straße).

So prüfen Sie es

Automatisch: Für dieses Kriterium gibt es keine axe-core-Regel. Ob eine Reihenfolge „Bedeutung erhält“, ist eine Beurteilung der Seite und erfordert eine manuelle Prüfung. (Positive tabindex-Werte meldet unser Checker als Best-Practice-Warnung, nicht als Verstoß gegen 2.4.3.)

Manuell: Drücken Sie oben auf der Seite Tab und folgen Sie dem Fokusindikator. Bewegt er sich in sinnvoller Reihenfolge durch Header, Hauptinhalt und Footer? Auf Produktseiten: Variante, Menge, „In den Warenkorb“. Öffnen Sie jedes Pop-up und jede Schublade: Der Fokus sollte hineinwandern, dort bleiben, solange sie offen sind, und beim Schließen zum Auslöser zurückkehren. Füllen Sie das Checkout-Formular nur mit Tab aus.

So beheben Sie es

• Lassen Sie die DOM-Reihenfolge der visuellen und logischen Reihenfolge folgen; vermeiden Sie Umsortierung per CSS, wenn sie die Bedeutung ändert.
• Entfernen Sie positive tabindex-Werte; verwenden Sie 0 für eigene fokussierbare Elemente und -1 für Elemente, die per Skript fokussiert werden.
• Setzen Sie beim Öffnen eines Dialogs den Fokus hinein und beim Schließen zurück auf den Auslöser.
• Fügen Sie dynamische Inhalte (Pop-ups, Fehlermeldungen) im DOM neben dem Bedienelement ein, zu dem sie gehören.

Verwandte Kriterien

• 2.1.1 Tastatur — jede Funktion muss per Tastatur funktionieren.
• 2.4.7 Fokus sichtbar — Nutzer müssen sehen, wo der Fokus ist.
• 2.4.11 Fokus nicht verdeckt (Minimum) — fokussierte Elemente dürfen nicht verdeckt sein.

Häufige Fragen

Muss die Fokus-Reihenfolge der sichtbaren Reihenfolge entsprechen?

Nicht genau. Die WCAG verlangen, dass die Reihenfolge Bedeutung und Bedienbarkeit erhält. Kleine Abweichungen sind in Ordnung; Sprünge, die ein Formular oder einen Dialog verwirrend oder unbenutzbar machen, sind ein Verstoß.

Ist ein positiver tabindex ein WCAG-Verstoß?

Nicht automatisch, aber das W3C führt es als häufigen Fehler auf, mit tabindex eine Fokus-Reihenfolge zu erzeugen, die Bedeutung oder Bedienung zerstört. Werte über 0 führen fast immer dazu — vermeiden Sie sie also.

Wohin sollte der Fokus beim Öffnen eines Pop-ups wandern?

In das Pop-up hinein und beim Schließen zurück zu dem Button, der es geöffnet hat. Das W3C führt Dialoge, die in der Fokus-Reihenfolge weit von ihrem Auslöser entfernt liegen, als Verstoß gegen 2.4.3 auf.