Dieses WCAG-Kriterium verlangt, dass interaktive Elemente (z. B. Links, Buttons, Formulare) bei Bedienung mit der Tastatur den Fokus in einer logischen Reihenfolge bekommen. Die Reihenfolge sollte der visuellen Darstellung und Bedeutung der Inhalte entsprechen, damit Tastatur-Nutzende nicht die Orientierung auf einer Seite verlieren. Es kann dabei mehrere logische Fokus-Reihenfolgen geben; entscheidend ist, dass mindestens eine von ihnen eingehalten wird.
Tipps und Infos zur Umsetzung des WCAG-Kriteriums 2.4.3
Hier kommen von uns noch ein paar Tipps und Infos zur Umsetzung des WCAG-Kriteriums 2.4.3:
- DOM und visuelle Darstellung synchronisieren: Sorge dafür, dass die Reihenfolge der interaktiven Elemente im HTML-Dokument (DOM) der visuellen Anordnung auf der Seite entspricht (z. B. durch sauberes HTML-Markup).
- tabindex mit Bedacht einsetzen: Verwende tabindex nur, wenn es wirklich nötig ist; ein falscher Einsatz kann die natürliche (logische) Fokus-Reihenfolge stören.
- Dialoge korrekt handhaben: Bei Modal-Dialogen sollte der Fokus beim Öffnen in den Dialog springen, und beim Schließen wieder zurückkehren; alle außerhalb gelegenen Elemente sollten inaktiv sein.
- Komplexe Layouts vermeiden: Wenn du beispielsweise Seitenleisten per CSS visuell nach links verschiebst, obwohl sie im HTML erst später kommen, achte darauf, dass der Fokus trotzdem logisch fließt (z. B. Hauptinhalt zuerst).
- Tab-Reihenfolge testen: Teste konsequent das Tab-Verhalten in deiner Seite; mit Tastatur, Screenreader oder Fokus-Visualisierungen; und achte darauf, dass die Reihenfolge konsistent und nachvollziehbar bleibt.
Bei Fragen beraten wir dich gerne. Mehr Infos zu diesem Kriterium findest du auch auf der folgenden englischen WAI-Seite zum WCAG-Kriterium 2.4.3 Fokus-Reihenfolge.