Direkt zum Hauptinhalt

WCAG 2.2 · Level A · BedienbarBarrierefreiheit als Cloud-Service

2.4.3 Fokus-Reihenfolge

Die Tab-Reihenfolge muss logisch und vorhersehbar sein.

Auf einen Blick

Was bedeutet dieses Kriterium?

Kurz gesagt

Die Tab-Reihenfolge muss logisch und vorhersehbar sein.

Aufwand

Mittel umzusetzen, schnell erledigt

Betrifft Rolle

Entwicklung

Konformitätsstufe

Level A

EN 301 549

Abschnitt 9.2.4.3 · BITV 2.0 · BFSG

Verständlich erklärt

Was heißt 2.4.3 für die Praxis?

Die Tab-Reihenfolge muss logisch und vorhersehbar sein.

Die Tab-Reihenfolge folgt der visuellen Lesereihenfolge: links nach rechts, oben nach unten. Vermeiden Sie positive tabindex-Werte.

Technisch formuliert: Fokussierbare Komponenten erhalten den Fokus in einer Reihenfolge, die Bedeutung und Bedienbarkeit bewahrt.

Wer ist betroffen?

Ein Alltagsbeispiel

Bedienbarkeit bedeutet: jeder Mensch kann die Seite nutzen — egal ob mit Maus, Tastatur, Touchscreen oder Sprachsteuerung. Wer dieses Kriterium verletzt, schließt Nutzer aus, die auf eine bestimmte Eingabemethode angewiesen sind. Besonders betroffen sind: Tastaturnutzer, Menschen mit motorischen Einschränkungen.

Die Lösung

So setzen Sie es richtig um

Die Tab-Reihenfolge folgt der visuellen Lesereihenfolge: links nach rechts, oben nach unten. Vermeiden Sie positive tabindex-Werte.

Fokussierbare Komponenten erhalten den Fokus in einer Reihenfolge, die Bedeutung und Bedienbarkeit bewahrt.

Umsetzung

Schritt für Schritt

Konkrete Anleitung zur praktischen Umsetzung dieses Kriteriums.

  1. 1

    Tab-Reihenfolge testen

    Tabben Sie durch die Seite. Springt der Fokus logisch von Element zu Element?

Typische Fehler

Das wird häufig falsch gemacht

Diese Fehler sehen wir in der Praxis besonders oft — und wie Sie sie vermeiden.

Nur mit der Maus testen

Entwickler nutzen beim Testen fast immer die Maus. Viele Probleme werden erst sichtbar, wenn man die Tastatur verwendet. Der Tab-Test sollte Routine sein.

Hover-Effekte als einzige Interaktion

Was nur per Hover funktioniert, ist per Tastatur unbedienbar. Interaktionen sollten immer auch per Fokus oder Klick auslösbar sein.

Selbst prüfen

So testen Sie dieses Kriterium

Mit diesen Methoden können Sie selbst prüfen, ob Ihre Webseite das Kriterium erfüllt.

Tastatur-Test

Legen Sie die Maus beiseite. Navigieren Sie ausschließlich mit Tab, Umschalt+Tab, Enter, Leertaste und Pfeiltasten durch die Seite. Alles erreichbar? Alles bedienbar?

Fokusindikator prüfen

Bei jeder Tastaturnavigation sollte ein sichtbarer Fokusring das aktuell aktive Element markieren. Ist er überall gut sichtbar?

Mit Screenreader und Tastatur

Kombinieren Sie Screenreader-Ansage und Tastaturnavigation. So simulieren Sie die tägliche Nutzung blinder Menschen.

Häufige Fragen

Fragen und Antworten

Ist dieses Kriterium wirklich Pflicht?
Ja. Level A ist die Grundlage jeder Barrierefreiheit. Ohne Level A ist eine Website für bestimmte Nutzergruppen komplett unzugänglich. BITV 2.0, EN 301 549 und BFSG verlangen mindestens Level AA — was Level A einschließt.
Wie kann ich prüfen, ob meine Seite dieses Kriterium erfüllt?
Nutzen Sie einen Test-Mix: automatisierte Tools wie Pa11y oder axe DevTools finden viele Probleme zuverlässig, aber nicht alle. Ergänzen Sie mit manuellen Tests — Tastaturnavigation, Screenreader-Test und eine visuelle Prüfung der relevanten Seitenbereiche.
Welche anderen Kriterien hängen damit zusammen?
Dieses Kriterium steht in engem Zusammenhang mit 1.3.2, 2.4.7. Diese Kriterien sollten gemeinsam geprüft werden, weil sie sich gegenseitig ergänzen.

Verwandte Kriterien

Weiterführende Erfolgskriterien

Diese Kriterien stehen in engem Zusammenhang mit 2.4.3 und sollten gemeinsam betrachtet werden.