Der Fokusindikator ist die visuelle Markierung, die Tastaturnutzern zeigt, welches Element gerade aktiv ist; Browser stellen ihn standardmäßig als Fokusrahmen (Outline) dar. Das WCAG-Erfolgskriterium 2.4.7 Focus Visible (Stufe AA) verlangt, dass der Tastaturfokus sichtbar ist. Den Indikator per outline: none im CSS vollständig zu entfernen, ist ein häufiger Barrierefreiheitsfehler.
Wer mit der Maus arbeitet, sieht jederzeit, wo der Zeiger ist; die einzige Referenz von Tastaturnutzern ist der Fokusindikator. Ist beim Durchlaufen mit der Tab-Taste nicht erkennbar, welcher Link, Button oder welches Formularfeld aktiv ist, wird die Seite praktisch unbenutzbar. Das betrifft Menschen, die wegen motorischer Einschränkungen keine Maus nutzen können, ebenso wie Nutzer von Bildschirmlupen und Power-User, die die Tastatur bevorzugen. Genau deshalb verlangt das WCAG-Erfolgskriterium 2.4.7 Focus Visible (Stufe AA) einen sichtbaren Fokus in jeder tastaturbedienbaren Oberfläche. Der häufigste Fehler: Der Standardrahmen gefällt nicht, wird per outline: none entfernt, und nichts tritt an seine Stelle.
Richtig ist, den Indikator nicht zu löschen, sondern ans Design anzupassen: ein Fokusstil in Markenfarben, klar vom Hintergrund abgesetzt und ausreichend kräftig; outline-offset hebt ihn leicht vom Element ab und verbessert die Lesbarkeit. Der CSS-Selektor :focus-visible erleichtert die Arbeit, weil der Indikator nur bei Tastaturbedienung erscheint, nicht beim Mausklick. WCAG 2.2 hat zusätzliche Kriterien zur Erscheinung des Fokus und dazu ergänzt, dass er nicht von anderen Elementen verdeckt werden darf. Der Test braucht keine Werkzeuge: Maus beiseitelegen und die Seite nur mit Tab durchlaufen. Ist jederzeit erkennbar, wo man ist? Sticky-Header oder fixierte Banner dürfen das fokussierte Element nie verdecken.
Häufig gestellte Fragen
Warum ist outline: none problematisch?
Weil es das einzige Orientierungsmittel von Tastaturnutzern entfernt: Ohne Fokusrahmen sieht eine Person, die mit Tab navigiert, nicht, wo sie sich befindet, und die Seite wird praktisch unbenutzbar. Das führt zu einem Verstoß gegen WCAG 2.4.7 Focus Visible. Passt der Standardrahmen nicht zum Design, ist die Lösung Ersetzen statt Entfernen: einen kontrastreichen eigenen Fokusstil definieren und ihn per :focus-visible nur bei Tastaturbedienung anzeigen.
Wie passt man den Fokusindikator an?
Im CSS über den Selektor :focus-visible mit der outline-Eigenschaft Stärke, Stil und Farbe festlegen; ein Abstand von ein bis zwei Pixeln per outline-offset verbessert die Sichtbarkeit. Die Farbe muss sich auf hellen wie dunklen Hintergründen klar abheben; eine dünne oder blasse Linie wirkt elegant, geht auf dem Bildschirm aber unter. Die Änderung ausschließlich mit der Tab-Taste an jedem interaktiven Element testen: Buttons, Links, Formularfelder und eigene Komponenten müssen alle abgedeckt sein.
Dieser Inhalt dient nur zur Information und stellt keine Rechtsberatung dar.