Fokusreihenfolge (Focus Order)

Die Fokusreihenfolge (englisch Focus Order) legt fest, in welcher Abfolge Links, Buttons und Formularfelder beim Tabbing fokussiert werden. Standardmäßig folgt sie der Reihenfolge im HTML-Quelltext. WCAG 2.4.3 Fokusreihenfolge (A) verlangt, dass diese Abfolge Bedeutung und Bedienbarkeit erhält.

Typische Fehler

• CSS-Umordnung (order, flex-direction: row-reverse, Grid-Platzierung), die visuell eine andere Reihenfolge zeigt als im Code
• Positive tabindex-Werte, die die natürliche Reihenfolge durchbrechen
• Modals und Off-Canvas-Menüs, die am Ende des DOM stehen und nicht fokussiert werden
• Versteckte, aber fokussierbare Elemente (z. B. geschlossene Menüs ohne inert oder hidden)
• Fokus, der nach dem Schließen eines Dialogs an den Seitenanfang springt

Gutes Fokusmanagement

DOM-Reihenfolge an die visuelle Reihenfolge anpassen, Dialoge beim Öffnen fokussieren und den Fokus darin halten, beim Schließen zum Auslöser zurückkehren, nicht sichtbare Bereiche mit inert ausnehmen und nach dynamischen Änderungen (z. B. Filtern) den Fokus sinnvoll setzen.

Häufige Fragen

Muss die Fokusreihenfolge immer von links nach rechts verlaufen?

Nein, sie muss logisch sein. In der Regel folgt sie der Leserichtung, bei RTL-Sprachen von rechts nach links.

Wie mache ich die Reihenfolge sichtbar?

Mit der Tab-Reihenfolgenansicht in Accessibility Insights oder der „Tab Order“-Ansicht von WAVE.

Verwandte Begriffe: Tabbing, Tastaturnavigation, Fokusindikator, Bedienbar