Fokus-Indikator

Definition: Ein Fokus-Indikator (Focus Indicator, Focus Ring) ist eine sichtbare visuelle Hervorhebung die anzeigt welches interaktive Element (Button, Link, Formularfeld, Checkbox) auf einer Webseite oder Anwendung gerade den Tastaturfokus hat. Der Fokus-Indikator ist das visuelle Äquivalent des Mauszeigers für Tastaturnutzer: ohne ihn wissen Tastaturnutzer nicht wo sich ihr Cursor befindet. Zielgruppen die auf Fokus-Indikatoren angewiesen sind: Tastaturnutzer (Tab-Navigation ohne Maus; Power-User; Barrierefreiheits-Nutzer); Screen-Reader-Nutzer (ergänzende visuelle Orientierung bei Teilsehenden); motorisch eingeschränkte Personen (Schalterzugang; Kopfmaus; Mundstab); Menschen mit motorischen Zittern (Maussteuerung schwierig; Tastaturnavigation bevorzugt); situative Einschränkungen (defekte Maus; Laptop-Trackpad-Fehler; One-Hand-Nutzung). WCAG-Anforderungen: WCAG 2.4.7 Focus Visible (Level AA): «Every keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible»; WCAG 2.4.11 Focus Appearance (Minimum; Level AA; WCAG 2.2 neu): Fokus-Indikator muss Mindestfläche (Umfang des Elements × 2px Outline), Mindestkontrast (3:1 gegen Nachbarfarben) und Sichtbarkeit (nicht von anderen Elementen verdeckt) erfüllen. Anti-Pattern: outline: none ohne Alternative – die häufigste Accessibility-Verletzung in der Webentwicklung.

Erläuterung

Die Geschichte des Fokus-Indikators im Web ist eng verbunden mit der Geschichte der CSS outline-Eigenschaft und dem Konflikt zwischen ästhetischem Design und Barrierefreiheit. Browser implementierten ab den späten 1990er Jahren standardmäßige Fokusrahmen: Netscape verwendete eine gepunktete schwarze Linie; Internet Explorer nutzte einen gepunkteten Rahmen; Chrome und Firefox etablierten den heute bekannten blauen Outline (Chrome: #005FCC; Firefox: eigenem Orange/Blau je nach Betriebssystem). Das Problem entstand mit dem Aufkommen von CSS-Reset-Stylesheets (Eric Meyer, «Reset CSS», 2007; später normalize.css, Nicolas Gallagher, 2011): viele Designer nutzten diese Resets um den Standard-Fokusring pauschal zu entfernen («a:focus { outline: none }»; «* { outline: none }»; «button:focus { outline: 0 }») weil der Browser-Standard-Outline optisch nicht zum Design passte – ohne eine eigene Alternative zu implementieren. WebAIM Million Report (jährliche Untersuchung der Top 1.000.000 Homepages; 2024) zeigt konsistent dass fehlendes oder mangelhaftes Fokus-Design zu den Top-5 der WCAG-Verletzungen gehört: im 2024-Report hatten 89,9% der Top-1-Millionen-Websites mindestens eine detektierbare WCAG-Verletzung; fehlendes Fokus-Styling war in über 35% der analysierten Sites ein Problem. Das W3C WCAG Working Group führte mit WCAG 2.2 (September 2023) die verschärfte Anforderung 2.4.11 Focus Appearance (Minimum) als Level AA ein: der Fokus-Indikator muss eine Mindestfläche von perimeter × 2px (Umfang des fokussierten Elements multipliziert mit 2px Outline-Breite) haben; einen Kontrast von mindestens 3:1 zwischen fokussiertem und unfokussiertem Zustand desselben Pixels; und darf nicht vollständig durch andere Inhalte verdeckt sein. Die :focus-visible CSS-Pseudoklasse (CSS Selectors Level 4; Implementierung in Chrome 86+, Firefox 85+, Safari 15.4+) löste das ästhetische Hauptproblem: :focus-visible wird nur bei Tastaturnavigation aktiv, nicht bei Mausklick – Designer können :focus-visible für visuelle Fokus-Styles nutzen und :focus für Maus-Interaktionen separat behandeln, ohne die Accessibility zu kompromittieren.

CSS-Implementierung und :focus-visible

:focus vs. :focus-visible – der entscheidende Unterschied: Problem mit :focus: wenn Nutzer auf Button klickt (Maus), erscheint auch der Fokusring – viele Designer empfanden das als optisch störend und entfernten den Fokusring komplett; :focus-visible Lösung: Browser erkennt ob Fokus durch Tastatur oder Maus/Touch gesetzt wurde; :focus-visible wird nur bei Tastaturnavigation angezeigt; bei Mausklick wird :focus-visible nicht gesetzt (außer bei Formularfeldern = immer sichtbar); CSS-Empfehlung: /* Nur für Tastaturnavigation sichtbarer Fokusring */ :focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; } /* Für Mausnutzer kein sichtbarer Ring (außer native Elements bleiben) */ :focus:not(:focus-visible) { outline: none; }; Browser-Support: Chrome 86+, Firefox 85+, Safari 15.4+; für ältere Browser: :focus als Fallback benutzen; JavaScript-Polyfill focus-visible (WICG) für ältere Browser; Wichtig: nie nur :focus-visible ohne :focus-Fallback (ältere Browser erhalten dann gar keinen Fokusring)
Outline vs. Box-Shadow – Fokusring-Implementierungsoptionen: CSS outline: Standardmethode; folgt der Form des Elements (auch nicht-rechteckige Elemente); outline-color; outline-width; outline-style; outline-offset (Abstand zwischen Element und Outline); kein Layout-Shift (outline nimmt keinen Platz ein); Empfehlung: outline: 3px solid #005fcc; outline-offset: 2px; box-shadow als Alternative: box-shadow: 0 0 0 3px #005fcc; erzeugt visuell ähnliches Ergebnis; folgt border-radius (wird abgerundet wenn Element abgerundet ist); Nachteil: beeinflusst Layering; nicht identisch mit outline in allen Browsern; Kombination (beste Praxis): outline: 3px solid #005fcc; outline-offset: 2px; /* Fallback für ältere Browser; und für abgerundete Buttons schöner */ box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3); Zweifacher Fokusring (enhanced): weißer Innenring + farbiger Außenring = auf jedem Hintergrund sichtbar: outline: 3px solid #005fcc; box-shadow: 0 0 0 5px white, 0 0 0 8px #005fcc; Kontrast-Anforderung (WCAG 2.4.11): Fokusring-Farbe vs. benachbarte Farben ≥ 3:1
Browser-Standard-Fokusringe und Custom-Implementierung: Chrome Default (2022): blauer Fokusring (#005FCC); 2px solid; 2px offset; funktioniert auf dunklen und hellen Hintergründen meist gut; Firefox Default: roter/oranger Fokusring (plattformabhängig); Auto-Kontrast auf manchen Systemen; Safari Default: blauer Fokusring ähnlich Chrome; iOS Safari: eigener blauer Ring; Browser-Standardringe sind nicht einheitlich und passen oft nicht zum Design; Custom-Fokusring-Design: Farbe: Primärfarbe des Design-Systems oder dedizierte Fokus-Farbe (Kontrast gegen alle Hintergründe prüfen); Breite: mindestens 2px (WCAG 2.4.11 schreibt Umfang × 2px vor; praktisch ≥ 3px empfohlen); Offset: 2–4px Abstand zum Element (verhindert Verdeckung durch Element-Hintergrund); Universelle Basis: *, *:before, *:after { box-sizing: border-box; } *:focus-visible { outline: 3px solid var(--color-focus, #005fcc); outline-offset: 2px; } als globale Basis; komponentenspezifisch überschreiben wenn nötig

WCAG 2.4.11, Dark Mode und Testing

WCAG 2.4.11 Focus Appearance – Anforderungen im Detail: Neue Anforderung in WCAG 2.2 (September 2023): Level AA; Mindestgröße der Fokusindikator-Fläche: Umfang (Perimeter) des fokussierten UI-Elements × 2 CSS-Pixel; Beispiel: Button 200px breit × 44px hoch = Umfang ca. 488px; Mindestfläche des Fokusindikators = 488 × 2 = 976 CSS-Quadratpixel; ausreichend große Outline erfüllt dies; dünne 1px-Outline oft unzureichend; Kontrast-Anforderung: der Fokusindikator-Bereich muss ≥ 3:1 Kontrast haben zwischen: fokussiertem Zustand und unfokussiertem Zustand desselben Pixels; oder zwischen Fokusindikator und benachbartem Hintergrund; Sichtbarkeit: darf nicht vollständig von anderen Elementen verdeckt sein; Autor-Fokusindikator: wenn der Entwickler einen eigenen Fokusindikator setzt (nicht auf Browser-Standard verlässt), muss dieser WCAG 2.4.11 erfüllen; Browser-Standard: wenn kein CSS-Fokusstyling gesetzt: Browser-Standard gilt; WCAG 2.4.11 prüft den Browser-Standard nicht (da nicht autor-kontrolliert); Praxis-Implikation: eigene Fokus-Styles definieren und WCAG 2.4.11 erfüllen ist besser als auf Browser-Standards zu vertrauen
Fokus-Indikator im Dark Mode: Problem: Fokusring-Farbe aus Light Mode oft auf dunklem Hintergrund nicht ausreichend kontrastreich; Lösung 1 – Kontext-abhängige Fokusfarbe: @media (prefers-color-scheme: dark) { :focus-visible { outline-color: #7ab3ff; /* helleres Blau für Dark Mode */ } }; Lösung 2 – Zweifarbiger Fokusring: immer auf jedem Hintergrund sichtbar (heller Ring + dunkler Ring): :focus-visible { outline: 3px solid white; box-shadow: 0 0 0 5px #005fcc; }; auf dunklem Hintergrund: weißer Outline sichtbar; auf hellem Hintergrund: blauer box-shadow sichtbar; Lösung 3 – CSS Custom Property: --focus-ring-color für Light/Dark-Mode-Theming; Fokus auf Buttons in Icon-Bars: Icon-Buttons haben oft keinen sichtbaren Rahmen; Fokusring schwimmt auf komplexem Hintergrund; Lösung: outline-offset erhöhen; oder Box mit Hintergrundfarbe als Fokus-Indikator; Testing: Dark Mode + Tastaturnavigation kombiniert testen
Fokus-Testing und häufige Fehler: Testing-Methode: Chrome/Firefox öffnen; Maus ablegen; ausschließlich Tab/Shift+Tab navigieren; für jedes fokussierte Element prüfen: ist der Fokusring eindeutig sichtbar? ist er auf jedem Hintergrund erkennbar? verschwindet er wenn Klick erfolgt? Automatisierte Tests: axe-DevTools erkennt outline:none ohne :focus-visible-Alternative; Lighthouse Accessibility-Check; Chrome DevTools Accessibility Tree; manuelle Tests unersetzlich da Kontrast-Qualität und visuelle Erkennbarkeit automatisiert schwer beurteilbar; Häufige Fehler: outline: none in CSS-Reset ohne Alternative (häufigster Fehler); :focus { outline: none } auf Links und Buttons; focus-visible polyfill fehlt für ältere Browser; Fokusring wird von überlappenden Elementen (Sticky-Header; Float-Elementen) verdeckt; Fokusring-Farbe hat unzureichenden Kontrast gegen Seitenhintergrund; Custom-Komponenten (div-basierte Buttons) ohne tabindex und :focus-visible-Styling; Formulare mit CSS-Reset der Formular-Outlines entfernt ohne Ersatz

Praxistipp: Führen Sie den «Maus-weglegen-Test»: Legen Sie die Maus beiseite und navigieren Sie Ihre gesamte Website ausschließlich mit der Tab-Taste. Können Sie jederzeit sehen wo Sie sich befinden? Falls irgendwo der Fokusring unsichtbar ist oder verschwindet haben Sie ein Accessibility-Problem. Implementieren Sie als Basis :focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; } im globalen CSS und entfernen Sie alle outline: none-Regeln ohne :focus-visible-Alternative. Dieser einzelne CSS-Fix beseitigt die häufigste WCAG-Verletzung in der Webentwicklung und macht Ihre Website für alle Tastaturnutzer sofort deutlich besser nutzbar.