Fokus-Indikator
Der Fokus-Indikator ist das visuelle Signal, das anzeigt, welches Element gerade Tastatur-Fokus hat – meist ein farbiger Outline-Ring um Schaltfläche, Verweis oder Formular-Feld. Er ist verbindliche Grundlage einer barrierefrei bedienbaren Website.
Der Fokus-Indikator ist eine der zentralen Barrierefreiheits-Anforderungen. Er ist Pflicht für jede interaktive Komponente und Voraussetzung für Tastatur-Navigation – die primäre Eingabe-Methode für viele Besucher mit motorischen Einschränkungen, für Bildschirm-Lesegeräte und für Tastatur-orientierte Power-Anwender.
In einfachen Worten
Nicht jede Person bedient eine Website mit der Maus. Tastatur-Navigation ist die primäre Eingabe-Methode für viele Besucher mit motorischen Einschränkungen, für blinde Besucher mit Bildschirm-Lesegeräten und für tastatur-orientierte Power-Anwender. Damit diese Gruppen jederzeit erkennen können, welches Element gerade aktiv ist, braucht jedes interaktive Element einen sichtbaren Fokus-Zustand. Das WCAG-Erfolgskriterium 2.4.7 verlangt diesen sichtbaren Fokus-Indikator; das neuere Kriterium 2.4.11 (WCAG 2.2) ergänzt einen Mindest-Kontrast von 3:1 zur Umgebung. Die häufigste Verletzung in modernen Web-Designs ist die globale CSS-Regel outline: none ohne Ersatz – weil viele Gestalterinnen und Gestalter die Browser-Standard-Umrandung als unästhetisch empfinden und sie entfernen, ohne eine eigene Variante einzubauen.
Wozu brauche ich das?
Verbindlich für jede klickbare Komponente: Schaltflächen, Verweise, Formular-Felder, Auswahl-Menüs, Tab-Leisten, Akkordeon-Köpfe. Der Fokus-Indikator muss über die Tab-Taste erreichbar und visuell deutlich erkennbar sein – mit dem Mindest-Kontrast von 3:1 nach WCAG 2.4.11. Die Anforderung gilt für helle und dunkle Farb-Schemata gleichermaßen.
Beispiel aus der Praxis
Ein typischer Befund in modernen Web-Designs: Alle Schaltflächen und Verweise haben ein gepflegtes Hover-Verhalten, aber outline: none ist global im CSS gesetzt. Tastatur-Navigation wird damit unmöglich, weil kein Element zeigt, wo der Fokus gerade liegt. Die Korrektur ist Standard-Handwerk: outline: none durch eine eigene Fokus-Umrandung ersetzen, die zur Marke passt – etwa eine 2 Pixel starke Umrandung in der Akzent-Farbe mit einem kleinen Abstand zum Element. Die Implementierung erfolgt einmal im Design-System und wirkt anschließend automatisch auf alle Komponenten. Der Aufwand bleibt überschaubar; die Wirkung: Tastatur-Navigation funktioniert, das WCAG-Erfolgskriterium 2.4.7 ist erfüllt, die Marken-Wirkung bleibt erhalten.
Wirtschaftlicher Nutzen
Fokus-Indikator-Hygiene ist eine der günstigsten und wirksamsten Barrierefreiheits- und Usability-Maßnahmen. Einmal sauber im Design-System eingebaut wirkt sie auf alle künftigen Komponenten automatisch – kein wiederkehrender Pflege-Aufwand, keine Wartung. Die rechtliche Relevanz ist mit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) seit Mitte 2025 gestiegen: Tastatur-Bedienbarkeit ist eine der vier Grundanforderungen der WCAG (Operable). Wer das Fokus-System fehlerhaft hat, fällt durch jeden ernstzunehmenden Barrierefreiheits-Audit; wer es sauber hat, signalisiert Sorgfalt auch gegenüber Besuchern, die ohne Tastatur unterwegs sind.
Typische Fehler
- outline: none global ohne Ersatz gesetzt – die häufigste WCAG-Verletzung im modernen Web-Design.
- Fokus-Indikator nur in einer Farbe, die im Hover-Zustand visuell verschwindet – tastatur-orientierte Power-Anwender verlieren die Orientierung.
- Eigene Fokus-Umrandung mit zu wenig Kontrast (etwa hellgrau auf weißem Hintergrund) – formal vorhanden, faktisch nicht sichtbar.
- Nur die :focus-Pseudo-Klasse verwendet, nicht :focus-visible – Maus-Klicks erzeugen dann unerwünschte Umrandungen.
- Im dunklen Modus (prefers-color-scheme) die Fokus-Farbe nicht angepasst – die im hellen Modus passende Akzent-Farbe verschwindet im dunklen Modus.
Worauf achten?
- outline: none nicht ohne Ersatz verwenden – immer eine eigene Fokus-Umrandung über die :focus-visible-Pseudo-Klasse definieren.
- :focus-visible bevorzugen – die Fokus-Anzeige erscheint dann ausschließlich bei Tastatur-Navigation, nicht bei Maus-Klicks.
- Mindest-Kontrast 3:1 zum Hintergrund nach WCAG 2.4.11 einhalten – getrennt für hellen und dunklen Modus prüfen.
- Fokus-Indikator muss klar erkennbar sein – keine 1-Pixel-Umrandung in dezentem Grau, sondern eine deutliche visuelle Markierung.
- Vor jedem Live-Gang alle interaktiven Elemente mit der Tab-Taste durchgehen – ein Standard-Test, der häufig vergessen wird.
Häufig gestellte Fragen
Was ist ein Fokus-Indikator?
Das visuelle Signal, das anzeigt, welches Element auf einer Website gerade Tastatur-Fokus hat – meist ein farbiger Umrandungs-Ring um eine Schaltfläche, einen Verweis oder ein Formular-Feld. Er ist Voraussetzung dafür, dass Besucher die Tab-Taste sinnvoll nutzen können.
Wer profitiert von einem sichtbaren Fokus-Indikator?
Menschen mit motorischen Einschränkungen, die keine Maus nutzen können; blinde Besucher mit Bildschirm-Lesegeräten; tastatur-orientierte Power-Anwender; Besucher mit vorübergehenden Einschränkungen (gebrochener Arm, defekte Maus). Insgesamt eine größere Gruppe, als gemeinhin angenommen wird.
Welche WCAG-Werte gelten?
WCAG 2.4.7 verlangt einen sichtbaren Fokus-Indikator für alle interaktiven Elemente. Das neuere Kriterium 2.4.11 (WCAG 2.2) ergänzt einen Mindest-Kontrast von 3:1 zur Umgebung und eine ausreichende Größe.
Worin unterscheidet sich :focus von :focus-visible?
:focus erscheint bei jedem Fokus, auch nach einem Maus-Klick. :focus-visible erscheint nur dann, wenn die Tastatur-Navigation tatsächlich genutzt wird – die saubere moderne Wahl, weil Maus-Klicks dann keine unerwünschten Umrandungen erzeugen.
Wie testet man die Fokus-Sichtbarkeit?
Manuell mit der Tab-Taste alle interaktiven Elemente einer Seite durchgehen und prüfen, ob jeder Schritt visuell klar erkennbar ist. Zusätzlich automatisierte Werkzeuge für Barrierefreiheits-Audits einsetzen, die fehlende oder unsichtbare Fokus-Indikatoren melden.