Was ist ein Focus Indicator?
Ein Focus Indicator ist eine visuelle Markierung, die zeigt, welches Element auf einer Webseite gerade den Tastaturfokus hat – also aktuell mit der Tastatur ausgewählt oder aktivierbar ist. Typisch ist ein sichtbarer Rahmen oder eine farbige Hervorhebung um Buttons, Links, Eingabefelder oder andere Bedienelemente.
Er ist essenziell für alle Menschen, die ohne Maus navigieren, etwa mit der Tabulatortaste oder anderen Tasten (z. B. Pfeil-, Enter-, Leertaste).
Warum ist ein sichtbarer Fokus wichtig?
Ohne einen sichtbaren Fokus wissen Tastaturnutzer:innen nicht, wo sie sich befinden. Die Bedienung wird dadurch erraten, erschwert oder unmöglich. Besonders betroffen sind:
Menschen mit motorischen Einschränkungen (z. B. keine Maussteuerung)
blinde oder sehbehinderte Menschen, die über Screenreader navigieren
Personen, die zur Entlastung der Hände Tastaturbefehle verwenden
alle Nutzer:innen, die temporär ohne Maus arbeiten (z. B. bei Defekten, Stromausfall, unterwegs)
Ein unsichtbarer Fokus ist eine kritische Barriere.
Wie sieht ein Focus Indicator aus?
Standardmäßig zeigt der Browser einen dünnen Rahmen (meist blau oder gepunktet) um das fokussierte Element. In barrierefreien Designs wird dieser Fokus oft gestalterisch angepasst – etwa durch:
farbige, kontrastreiche Ränder
Hintergrundfarben
Schatten oder Rahmenverstärkung
Wichtig ist: Der Fokus muss deutlich sichtbar und vom restlichen Design unterscheidbar sein.
Was man vermeiden sollte
outline: noneim CSS – unterdrückt den Fokus komplett (außer mit Alternativen)Fokus nur mit Farbe ohne ausreichenden Kontrast darstellen
Fokusanzeige nur für Mausaktionen gestalten (z. B. Hover-Effekte ohne Fokus-Effekte)
unklare Fokusreihenfolge durch schlecht strukturiertes HTML oder JavaScript
Anforderungen laut WCAG
In den Web Content Accessibility Guidelines (WCAG 2.2) sind Fokus-Indikatoren ausdrücklich gefordert, z. B.:
2.4.7 Sichtbarer Fokus – jede Tastaturbedienung muss visuell nachvollziehbar sein
1.4.11 Nicht-Text-Kontrast – Fokus-Indikatoren benötigen ausreichend Kontrast
2.4.3 Fokusreihenfolge – die Reihenfolge muss logisch und nachvollziehbar sein
Auch die BITV und EN 301 549 setzen diese Anforderungen voraus.
Tipps zur Gestaltung
Stelle sicher, dass alle interaktiven Elemente einen sichtbaren Fokus erhalten.
Verwende z. B.
outline,box-shadowoderbordermit ausreichendem Kontrast.Teste mit Tastatur-Navigation: Tab, Shift+Tab, Enter, Space.
Achte auf konsistente Darstellung in allen Browsern und auf mobilen Geräten.
Nutze keine visuell zurückhaltenden Farben für den Fokus (z. B. hellgrau auf weiß).
Tools zum Testen
Manuelle Tabulatorprüfung: Tab durch Seite navigieren und visuell verfolgen
Browser-Entwicklertools: CSS prüfen, Fokusstile sichtbar machen
Accessibility-Tools: axe, Lighthouse, WAVE
