Barrierefreie Websites: Fokusanzeigen nach WCAG 1.4.11 richtig umsetzen

Barrierefreie Websites sind keine Option, sondern eine Pflicht – besonders für Nutzer, die auf Tastaturbedienung angewiesen sind. Ein häufiger Stolperstein ist die Fokusanzeige: Sie markiert das aktuell ausgewählte Element und muss klar erkennbar sein. Doch viele Entwickler übersehen, dass die gängigen Kontrastregeln der WCAG auch für Fokusanzeigen gelten. WCAG 2.1 SC 1.4.11 verlangt mindestens ein Kontrastverhältnis von 3:1 zur umgebenden Fläche. Doch warum scheitern auch automatisierte Tools daran? Der Grund: Die :focus- oder :focus-visible-States existieren nur während der tatsächlichen Interaktion mit der Tastatur. Statische Tests reichen daher nicht aus – manuelle Prüfungen sind unverzichtbar.

Warum statische Tools hier versagen

Automatisierte Scanner wie Axe oder Lighthouse können Fokusanzeigen nicht zuverlässig bewerten, da sie die aktive Tastaturnavigation nicht simulieren. Ein Fokus-Indicator mag im Code definiert sein, doch ob er tatsächlich sichtbar ist, lässt sich nur prüfen, wenn man:

• Mit der Tab-Taste durch die Seite navigiert
• Die Shift + Tab-Kombination für die Rückwärtsnavigation nutzt
• Tools wie den Farbkontrastanalysator (CCA) oder Browser-DevTools einsetzt

Ohne diese Schritte bleiben versteckte Barrieren unentdeckt – selbst wenn der Code korrekt ist. Besonders problematisch wird es, wenn Fokusanzeigen nur über Farbwechsel kommunizieren oder in dunklem Modus unsichtbar werden.

Drei reale Fälle und ihre Lösungen

Fall 1: Tourismus-Website – Zu schwacher Fokuskontrast

Problem: Ein primärer Suchbutton verfügte zwar über eine Fokusanzeige, doch der Kontrast zur Hintergrundfarbe lag unter 3:1. Nutzer, die mit der Tastatur navigierten, konnten das Element zwar ansteuern, aber die Fokusmarkierung war zu dezent.

WCAG-Verstoß: SC 1.4.11 – Non-text Contrast

Lösung: Eine hochkontrastige Umrandung mit :focus-visible erzwingt die Sichtbarkeit – unabhängig von der Hintergrundfarbe.

:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

Fall 2: Bildungsplattform – Farbwechsel als einzige Fokusmarkierung

Problem: Ein „Anmelden“-Button wechselte beim Fokus von #02959F zu #027279. Der Kontrast zwischen beiden Zuständen betrug nur 1,57:1 – zu schwach für eine klare Erkennung. Das Problem verschärfte sich, da der Fokus rein über Farbänderungen kommuniziert wurde.

WCAG-Verstöße: SC 1.4.11 – Non-text Contrast und SC 1.4.1 – Use of Color

Lösung: Eine zusätzliche Umrandung stellt sicher, dass der Fokus auch ohne Farbwechsel sichtbar bleibt.

:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

Fall 3: Bildungsplattform – Unsichtbare Checkbox-Fokusanzeige

Problem: Ein „Merken“-Häkchen verwendete eine schwarze Fokusfarbe (#212529) auf dunkelgrauem Hintergrund (#1D191C). Der Kontrast lag bei 1,12:1 – praktisch unsichtbar. Selbst in hellen Themes war die Markierung kaum erkennbar.

Lösung: Ein kräftigerer Blau-Ton (#0297A2) verbessert den Kontrast auf 4,92:1 gegenüber dem Hintergrund und 3,79:1 zu angrenzenden Elementen.

:focus-visible {
  outline: 2px solid #0297A2;
}

Fokusanzeigen korrekt testen: Eine Schritt-für-Schritt-Anleitung

Um sicherzustellen, dass Fokusanzeigen in allen Szenarien funktionieren, empfiehlt sich dieser Testaufbau:

• Browser: Chrome oder Firefox (mit aktiviertem :focus-visible-Polyfill für ältere Versionen)
• Navigation: Nur Tastatur (ohne Maus)
• Tools: Farbkontrastanalysator (CCA) oder DevTools
• Optional: Screenreader wie NVDA oder VoiceOver für zusätzliche Validierung

Die wichtigsten Prüfschritte:

1. Tab-Navigation durchführen

• Prüfen, ob jeder interaktive Element (Links, Buttons, Formularfelder) eine sichtbare Fokusanzeige erhält.

1. Kontrastverhältnis messen

• Tools wie der Farbkontrastanalysator nutzen, um sicherzustellen, dass die Fokusfarbe mindestens 3:1 zum Hintergrund und angrenzenden Elementen aufweist.

1. Dunkler Modus und Zoom-Szenarien prüfen

• Viele Nutzer arbeiten mit dunklem Design oder zoomen auf 200%. Die Fokusanzeige muss in beiden Fällen klar erkennbar bleiben.

Checkliste vor dem Go-Live:

• Ist die Fokusanzeige sofort erkennbar?
• Erreicht der Kontrast mindestens 3:1?
• Wird der Fokus nicht ausschließlich über Farbwechsel kommuniziert?
• Ist die Fokusanzeige auch im dunklen Modus sichtbar?
• Bleibt die Markierung bei 200% Zoom klar erkennbar?

Fazit: Fokusanzeigen als kritischer Baustein der Barrierefreiheit

Fokusanzeigen gehören zu den am häufigsten übersehenen Barrierefreiheitsproblemen, obwohl sie für Tastaturnutzer essenziell sind. Automatisierte Tools können hier nur begrenzt helfen – manuelle Tests sind unverzichtbar. Mit den richtigen CSS-Lösungen und einer strukturierten Teststrategie lassen sich Verstöße gegen WCAG 1.4.11 jedoch zuverlässig vermeiden. Investitionen in barrierefreie Fokusanzeigen sind keine technische Spielerei, sondern eine Grundvoraussetzung für inklusive Web-Erlebnisse.

Der nächste Schritt? Setzen Sie die gezeigten Lösungen direkt in Ihren Projekten um und integrieren Sie die Fokusprüfung in Ihren Quality-Gate-Prozess – bevor Nutzer auf Probleme stoßen.