Standards · WCAG 2.2

SC 2.4.3 Stufe A WCAG 2.0

Fokusreihenfolge

Wenn Nutzende eine Seite per Tab-Taste durchlaufen, muss die Fokusreihenfolge einer Abfolge folgen, die Bedeutung und Bedienbarkeit erhält – in der Regel die visuelle Leserichtung. Eine chaotische Tab-Reihenfolge ist funktional fehlerhaft, auch wenn jedes einzelne Steuerelement für sich funktioniert.

Was dieses Erfolgskriterium verlangt

Wer mit der Tab-Taste durch interaktive Elemente navigiert, sollte sich in einer Reihenfolge bewegen, die es ermöglicht, jede Aufgabe ohne Kontextverlust abzuschließen. Bei Layouts in europäischer Leserichtung bedeutet das nahezu immer: von oben nach unten und von links nach rechts. Die Reihenfolge muss nicht identisch mit der visuellen Anordnung sein, aber jede Abweichung muss dennoch die Bedeutung erhalten – ein „Direkt zur Fußzeile“-Link kann beispielsweise außerhalb des Hauptflusses stehen, solange der übrige Ablauf sinnvoll ist.

Der Fehlerfall, auf den dieses Erfolgskriterium abzielt, sind Dialoge, die den Fokus verbergen, per Drag-and-drop neu angeordnete Gitter mit veralteter Tab-Reihenfolge sowie CSS, das Inhalte visuell umsortiert, aber den DOM in der ursprünglichen Abfolge belässt.

So lässt es sich erfüllen

  • Den DOM in Lesereihenfolge aufbauen. Weicht das visuelle Layout davon ab, sollten CSS-Grid- oder Flexbox-Reihenfolge-Eigenschaften mit Bedacht eingesetzt werden – denn die Quelltext-Reihenfolge ist es, der Tab folgt.
  • Wenn ein modales Fenster geöffnet wird, ist der Fokus dorthin zu verschieben und innerhalb des Dialogs einzusperren, bis er geschlossen wird. Beim Schließen muss der Fokus auf das auslösende Element zurückkehren.
  • Positive tabindex-Werte (tabindex="3") sind zu vermeiden. Sie erzeugen benutzerdefinierte Reihenfolgen, die dem DOM widersprechen und beim nächsten Seitenupdate sofort brechen.
  • Bei per Drag-and-drop neu sortierbaren Listen ist die DOM-Reihenfolge an die neue visuelle Anordnung anzupassen, damit Tab-Folge und Darstellung synchron bleiben.
  • Zum Testen: mit Tab von der Adressleiste durch jedes fokussierbare Element der Seite navigieren. Wer sich dabei „verloren“ fühlt, gibt Nutzenden dasselbe Erlebnis.

Häufige Fehler

  • Das modale Fenster öffnet sich, der Fokus verbleibt jedoch auf der Seite dahinter. Tab durchläuft verborgene Elemente, während das Dialogfenster unberührt schwebt.
  • Ein ausklappbares mobiles Menü öffnet sich, der Fokus bleibt im Seitenrumpf. Screenreader-Nutzende können das neu erschienene Element nicht finden.
  • flex-direction: row-reverse dreht die visuelle Reihenfolge um; die DOM-Reihenfolge bleibt unverändert; Tab bewegt sich nun von rechts nach links, während das Lesen von links nach rechts erfolgt.
  • Benutzerdefinierte tabindex-Werte sind über ein Formular verstreut; nachträglich hinzugefügte Felder erben tabindex="0" und landen am Ende der Reihenfolge.
  • Automatischer Fokus auf einem Abonnement-Popup, das 8 Sekunden nach dem Laden erscheint und den Fokus aus dem Lesefluss herausreißt.

Warum es wichtig ist

Die Fokusreihenfolge entspricht der Lesereihenfolge für Tastaturnutzende. Ist sie fehlerhaft, wird das Erlebnis nicht bloß langsamer – es wird unverständlich. Menschen mit motorischen Einschränkungen, die ausschließlich mit Tab und Shift+Tab navigieren, können in den falschen Formularabschnitt gelenkt werden, ein Pflichtfeld vollständig übersehen oder nach einer einzigen falsch platzierten Schaltfläche ihren Platz auf einer langen Seite verlieren.