Bewährte Praktiken

Sichtbarer Fokus: Warum outline: none die Tastaturzugänglichkeit zerstört

Entfernt man den CSS-Outline aus ästhetischen Gründen, macht man die Website für Tastaturbenutzer unbrauchbar. Diese verbreitete Praxis verstößt gegen zwei WCAG-Kriterien: sichtbaren Fokus (2.4.7) und nicht verdeckten Fokus (2.4.11). Moderne Lösungen wie :focus-visible und outline-offset ermöglichen einen diskreten, kontrastreichen und konformen Indikator.

Die kurze Antwort

Der Fokus-Indikator (häufig ein grauer oder blauer Rahmen) zeigt an, dass ein Formularelement, ein Link oder eine Schaltfläche die Tastaturinteraktion erhält. Das Entfernen dieses Rahmens mit „outline: none“, ohne ihn zu ersetzen, macht die Tastaturnavigation unsichtbar: ein schwerwiegendes Hindernis für jeden Nutzer, der keine Maus verwenden kann. Das WCAG-Kriterium 2.4.7 verlangt dies; 2.4.11 präzisiert, dass er nicht verdeckt werden darf.

Der Fokus dient nicht nur dazu, anzuzeigen, dass ein Element ausgewählt ist. Er ermöglicht auch zu verstehen, wo man sich im Seitenverlauf befindet, welche Aktion mit der Eingabetaste ausgelöst wird und welches Feld die nächste Eingabe erhält. Ohne visuelle Orientierungshilfe muss der Nutzer seine Position erraten oder die Navigation von vorne beginnen.

Die Korrektur besteht daher nicht darin, zwingend den nativen Browser-Stil beizubehalten. Sie besteht darin, einen wahrnehmbaren, konsistenten und ausreichend kontrastreichen Indikator für jede interaktive Komponente zu gewährleisten. Dieser Indikator kann die grafische Identität der Website respektieren, sofern er in allen Zuständen und auf allen Hintergründen sichtbar bleibt.

Warum outline: none zur Gewohnheit wurde

Der standardmäßige Outline der Browser ist ein ziemlich dicker grauer oder blauer Rahmen, der seit den 1990er-Jahren aus Gründen der Zugänglichkeitssicherheit vorgegeben wird. Ab den 2010er-Jahren empfanden Designer ihn als unästhetisch: Er „zerstöre“ das minimalistische Design. CSS-Resets (Normalize, Reset oder native Bootstrap-Lösungen) begannen, ihn zu verbergen, oft ohne Ersatz: „outline: none“ verbreitete sich als Standardmuster in Frameworks und Entwicklerstudios.

Das Problem ist systemisch: Diese Unterdrückung erfolgt fast automatisch und selten absichtlich. Die Inclaria-Studie 2026 zeigt, dass unter den 55 analysierten französischen E-Commerce-Websites die Mehrheit der kritischen Nichtkonformitäten mindestens eine Outline-Unterdrückung ohne Ersatz umfasst. Es ist ein Symptom: Kein Tastaturtest, keine barrierefreie Überprüfung vor dem Design.

Eine weitere häufige Ursache ist die Verwechslung zwischen dem Fokus, der durch einen Klick ausgelöst wird, und dem Fokus, der durch die Tastatur ausgelöst wird. Teams möchten den Ring entfernen, der nach einem Mausklick erscheint, und wenden dann outline: none auf alle :focus-Zustände an. Diese Regel betrifft dann auch Menschen, die Tab, Umschalt + Tab oder assistive Technologien nutzen. :focus-visible löst dieses Problem präzise, indem es die Interaktionsmodalitäten unterscheidet.

Wer ist blockiert?

Vier Profile sind direkt betroffen.

• Nutzer, die ausschließlich die Tastatur verwenden: motorische Behinderungen, Zittern, Lähmungen oder unterstützende Technologien (Pedalsteuerung, angepasste Maus). Sie sehen nichts, wenn sie im Formular mit der Tabulatortaste navigieren.
• Nutzer, die aus Präferenz mit der Tastatur navigieren: Entwickler, Data Analysts, Power-User, die 15 Sekunden pro Formular sparen, sowie blinde und sehbehinderte Nutzer, die mit einem Screenreader arbeiten (der sich oft auf den visuellen Fokus des Browsers oder einen Lesering stützt).
• Ältere Nutzer oder Personen mit motorischer Erschöpfung: Die Präzision mit der Maus wird schwierig; die Tastatur ist einfacher und schneller.
• Situationen mit temporärer Behinderung: gebrochener Arm, defektes Trackpad, Arbeit an einem Touchmonitor ohne Maus.

Die Blockade kann bei einem langen Formular vollständig sein. Eine Person kann bis zum Bestätigungsbutton gelangen, ohne zu wissen, welches Steuerelement aktiv ist, versehentlich einen sekundären Link auslösen oder ein bereits ausgefülltes Feld ändern. Bei einem Modalfenster kann das Fehlen eines Indikators auch den Eindruck erwecken, dass die Tastatur nicht mehr funktioniert, obwohl sich der Fokus weiterhin auf unsichtbare oder hinter dem Fenster liegende Elemente bewegt.

Die WCAG-Kriterien im Fokus

Zwei Kriterien bereiten Probleme:

Auf der Ebene der gesetzlichen Konformität sind diese beiden Kriterien auf Stufe AA, in Frankreich verpflichtend gemäß der europäischen Richtlinie (European Accessibility Act, anwendbar ab dem 28. Juni 2025 für neue Dienstleistungen, 28. Juni 2030 für bestehende Dienstleistungen).

Die Sichtbarkeit muss unter realen Nutzungsbedingungen überprüft werden, nicht nur an einer isolierten Komponente in einer Design-Bibliothek. Ein konformer Ring auf weißem Hintergrund kann in einem blauen Banner unkenntlich werden, durch overflow: hidden abgeschnitten werden oder unter einem mit fixed positionierten Header verschwinden. Die Konformität hängt daher vom endgültigen Rendering, der Position des Elements und seiner visuellen Umgebung ab.

Die moderne Lösung: :focus-visible und outline-offset

Moderne Browser und assistive Technologien unterstützen :focus-visible (seit 2018, IE 11 wird nicht unterstützt, erfordert jedoch eine Fallback-Strategie: .element:focus { outline: 2px solid #0066cc; } gefolgt von .element:focus-visible { /* verfeinerte Regeln */ }).

Die zu merkende Regel: :focus-visible zielt nur auf den Tastaturfokus ab, nicht auf den Mausfokus (auf .element:focus-visible { … }). Dies ermöglicht eine übersichtliche Oberfläche beim Klicken und behält gleichzeitig die Tastaturzugänglichkeit bei.

Beispiel 1: Ersetzen des Standard-Outlines

a, button, input:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }

Hier erzeugt outline-offset: 2px einen Abstand zwischen dem Element und dem Ring, wodurch verhindert wird, dass Inhalte verdeckt werden (Kriterium 2.4.11).

Für eine einheitliche Abdeckung muss dieselbe Logik auf andere interaktive Komponenten angewendet werden: Textbereiche, Dropdown-Listen, benutzerdefinierte Steuerelemente, Elemente mit tabindex und JavaScript-Widgets. Eine Regel nur auf Links und Schaltflächen anzuwenden, hinterlässt oft Lücken im Tastaturpfad.

Beispiel 2: Kontrastreicher grauer Outline, auch für Dark Mode

a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #333; outline-offset: 4px; } @media (prefers-color-scheme: dark) { a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #fff; } }

Der Mindestkontrast von 3:1 (Link 1.4.11, Graustufe) wird eingehalten: #333 auf Weiß ergibt einen Kontrast von 8,6:1.

Beispiel 3: box-shadow als Indikator

Was, wenn du den Outline wirklich ersetzen möchtest? box-shadow funktioniert ebenfalls, verschiebt jedoch nicht den Versatz wie outline-offset:

a:focus-visible { outline: none; box-shadow: 0 0 0 3px #0066cc; }

Achtung: box-shadow verbraucht etwas mehr GPU-Leistung als outline und wird nicht außerhalb von Containern mit `overflow: hidden` gezeichnet. outline ist robuster.

Falls outline: none in einer bestimmten Regel notwendig bleibt, muss der Ersatz im selben Block oder in einer unmittelbar erkennbaren Regel definiert werden. Diese Nähe verringert das Risiko, dass eine zukünftige Änderung der Kaskade den alternativen Indikator entfernt. Es müssen auch kombinierte Zustände getestet werden, insbesondere :hover, :active, :disabled und :focus-visible, damit ein spezifischerer Stil nicht versehentlich den Fokus überschreibt.

Wie man testet, ob der Fokus sichtbar ist

• Drücken Sie die Tab-Taste auf der Tastatur: Jedes interaktive Element (Link, Button, Eingabefeld) muss einen sichtbaren Rahmen haben.
• Öffnen Sie die Entwicklertools des Browsers (F12), Registerkarte „Accessibility“ (Chrome, Edge) oder „Inspector → Accessibility“ (Firefox), und prüfen Sie den Fokus-Indikator beim Tabben.
• Verwenden Sie einen Screenreader (NVDA unter Windows, VoiceOver auf Mac/iOS): Er kündigt das fokussierte Element an; der visuelle Fokus muss gleichzeitig folgen.

Der Test muss die gesamte Seite in beide Richtungen abdecken, mit Tab und dann Umschalt + Tab. Die Bewegungsreihenfolge muss logisch bleiben, der Indikator darf nie verschwinden, und kein Element darf die Tastatur blockieren. Außerdem müssen Menüs, Akkordeons, modale Fenster und dynamische Komponenten geöffnet werden, da ihr Verhalten nicht immer bei einem einfachen Durchlauf der Hauptseite sichtbar ist.

Testen Sie schließlich verschiedene Bildschirmbreiten und Zoomstufen. Bei 200 % kann eine feste Kopfzeile oder ein Einwilligungsbanner das fokussierte Element überdecken, obwohl alles bei 100 % korrekt erscheint. Der Fokus muss zumindest teilweise sichtbar bleiben, wenn sich der Inhalt neu anordnet.

Erkennung von Outline-Entfernungen

Der Inclaria-Scanner prüft zwei Dinge: (1) das Vorhandensein eines sichtbaren Fokusindikators auf Schlüsselelementen (Formulare, Schaltflächen, Links); (2) den Versatz dieses Indikators (keine Verdeckung unter einem festen Menü, beispielsweise). Ein Entfernen von outline: none ohne Ersatz wird als Nichtkonformität mit WCAG 2.4.7 markiert.

Der Bericht priorisiert diesen Fehler: Er tritt häufig bei Hunderten von Elementen auf (global angewendeter CSS-Reset) und hat direkte Auswirkungen auf die Benutzbarkeit.

Eine automatisierte Erkennung ermöglicht es, verdächtige CSS-Regeln und Komponenten ohne Ersatzstil schnell zu identifizieren. Sie muss jedoch durch einen manuellen Tastaturtest ergänzt werden, da die tatsächliche Sichtbarkeit vom Kontrast, dem grafischen Kontext, dem Scrollen und möglichen überlagerten Elementen abhängt.