Fokus-Reihenfolge & Fokus-Indikator – Bedienbarkeit per Tastatur
Fokus-Reihenfolge und Fokus-Indikator sind zwei eng verwandte Grundpfeiler der Tastaturbedienbarkeit. Die Fokus-Reihenfolge bestimmt, in welcher Reihenfolge interaktive Elemente mit der Tab-Taste angesteuert werden. Der Fokus-Indikator macht sichtbar, welches Element gerade aktiv ist.
Für Menschen, die keine Maus nutzen können – etwa aufgrund motorischer Einschränkungen oder als Screenreader-Nutzer – sind beide unverzichtbar. Ohne sichtbaren Fokus tappen sie im Dunkeln; ohne logische Reihenfolge verlieren sie die Orientierung. Beides sind Kernanforderungen der WCAG unter dem Prinzip Bedienbarkeit.
Konkret regeln die Erfolgskriterien 2.4.3 Fokus-Reihenfolge (Stufe A) und 2.4.7 Fokus sichtbar (Stufe AA) diese Anforderungen. Da die Stufe AA der gesetzlich geforderte Standard für die Konformität mit dem Barrierefreiheitsstärkungsgesetz (BFSG) ist, sind beide für rechtssichere Websites Pflicht.
Fokus auf einen Blick
- Fokus-Reihenfolge: logische Tab-Reihenfolge interaktiver Elemente (WCAG 2.4.3, Stufe A)
- Fokus-Indikator: sichtbare Markierung des aktiven Elements (WCAG 2.4.7, Stufe AA)
- Zielgruppe: Tastaturnutzer, Menschen mit motorischen Einschränkungen, Screenreader-Nutzer
- Häufigster Fehler: Entfernen des Fokus-Rahmens per
outline: none - WCAG 2.2: ergänzt 2.4.11 Focus Not Obscured (Stufe AA) gegen verdeckten Fokus
Was ist die Fokus-Reihenfolge?
Die Fokus-Reihenfolge beschreibt den Weg, den der Tastaturfokus durch eine Seite nimmt, wenn Nutzer wiederholt die Tab-Taste drücken. Sie muss einer sinnvollen, logischen Reihenfolge folgen, die Bedeutung und Bedienbarkeit erhält – typischerweise von oben nach unten und von links nach rechts, dem visuellen Lesefluss folgend.
Standardmäßig entspricht die Fokus-Reihenfolge der Reihenfolge der Elemente im HTML-Quelltext (DOM). Probleme entstehen, wenn das visuelle Layout per CSS umgeordnet wird, die Quelltext-Reihenfolge aber nicht dazu passt: Dann springt der Fokus scheinbar willkürlich über die Seite. Das Erfolgskriterium 2.4.3 Fokus-Reihenfolge (Stufe A) verlangt genau diese Übereinstimmung von logischer und wahrgenommener Reihenfolge.
Was ist der Fokus-Indikator?
Der Fokus-Indikator ist die visuelle Rückmeldung, die anzeigt, welches Element gerade den Tastaturfokus besitzt – meist ein Rahmen, ein Ring oder eine Umrandung. Browser stellen standardmäßig einen solchen Indikator bereit. Das Erfolgskriterium 2.4.7 Fokus sichtbar (Stufe AA) verlangt, dass er bei Tastaturbedienung immer erkennbar bleibt.
Der mit Abstand häufigste Fehler ist das pauschale Entfernen des Rahmens per outline: none aus ästhetischen Gründen – ohne Ersatz. Für Tastaturnutzer wird die Seite damit praktisch unbedienbar. Wer den Standard-Rahmen ersetzen möchte, sollte einen deutlich sichtbaren, kontrastreichen Ersatz definieren. WCAG 2.2 konkretisiert das mit dem AAA-Kriterium 2.4.13 Fokus-Erscheinungsbild, das messbare Mindestwerte für Größe und Kontrast des Indikators vorgibt.
Warum beide zusammengehören
Fokus-Reihenfolge und Fokus-Indikator wirken nur gemeinsam. Ein perfekt sichtbarer Indikator nützt nichts, wenn der Fokus chaotisch springt – und die logischste Reihenfolge bleibt wertlos, wenn niemand sieht, wo der Fokus steht. Erst zusammen ermöglichen sie eine verlässliche Tastaturbedienung.
Beide zahlen zudem auf unterschiedliche WCAG-Prinzipien ein: Die sichtbare Markierung betrifft die Wahrnehmbarkeit, die logische Reihenfolge die Bedienbarkeit. Gute Fokus-Führung ist damit ein Musterbeispiel dafür, wie sich Barrierefreiheit durch die gesamte digitale Barrierefreiheit zieht.
Fokus in der Praxis umsetzen
Eine korrekte Fokus-Führung lässt sich mit wenigen Grundregeln erreichen:
- DOM-Reihenfolge: Elemente in der logischen Reihenfolge im Quelltext anordnen, statt die Reihenfolge nur per CSS zu erzeugen.
- tabindex sparsam:
tabindex="0"undtabindex="-1"genügen fast immer; positive Werte vermeiden. - Fokus nie verstecken: statt
outline: noneeinen sichtbaren, kontrastreichen Ersatz-Stil definieren. - Verdeckung vermeiden: Sticky-Header oder Overlays dürfen den fokussierten Bereich nicht komplett überdecken (WCAG 2.4.11).
SiteCockpit Lösung
easyMonitoring: Fokus-Probleme automatisch erkennen
Fokus-Fehler bleiben mit der Maus oft unbemerkt. easyMonitoring prüft Ihre Website gezielt auf fehlende oder unterdrückte Fokus-Indikatoren (outline: none), eine unlogische Fokus-Reihenfolge und problematische positive tabindex-Werte. So sehen Sie genau, an welchen Stellen Tastaturnutzer die Orientierung verlieren – und erhalten den Nachweis für die WCAG-Kriterien 2.4.3 und 2.4.7.
Häufige Fragen zu Fokus-Reihenfolge und Fokus-Indikator
Wie teste ich die Fokus-Reihenfolge selbst?
Legen Sie die Maus beiseite und navigieren Sie ausschließlich mit der Tab-Taste durch die Seite. Achten Sie darauf, ob der Fokus einem sinnvollen, nachvollziehbaren Weg folgt und kein Element übersprungen wird.
Darf ich den Standard-Fokusrahmen des Browsers ändern?
Ja, verändern ist erlaubt – entfernen ohne Ersatz nicht. Sie können den Stil an Ihr Design anpassen, solange der Fokus deutlich sichtbar und kontrastreich bleibt.
Was bedeutet ein positiver tabindex-Wert?
Werte wie tabindex="3" erzwingen eine eigene Fokus-Reihenfolge und überschreiben die natürliche DOM-Reihenfolge. Das führt fast immer zu Verwirrung und sollte vermieden werden.
Reicht ein sichtbarer Fokus für WCAG-Konformität?
Für Stufe AA ist 2.4.7 (Fokus sichtbar) zentral, aber nicht allein ausreichend. Erst zusammen mit einer logischen Fokus-Reihenfolge (2.4.3) ergibt sich eine wirklich bedienbare Tastaturnavigation.
Tastaturbedienung rechtssicher absichern
Prüfen Sie Fokus-Reihenfolge und Fokus-Indikator Ihrer Website automatisch. Mit easyMonitoring starten Sie in wenigen Minuten.
Kostenlos testen