- Stufe
- AA
- Seit
- WCAG 2.0
- Einträge
- 96 / 193
2.4.7 Fokus sichtbar
Wer sich mit der Tastatur durch die Seite bewegt, muss jederzeit sehen können, welches Element den Fokus hat.
/ Was es verlangt
Sehende Tastaturnutzende, darunter Menschen mit motorischen Behinderungen und alle, die einen Schalter oder Sprachsteuerung verwenden, orientieren sich am Fokusindikator: dem Rahmen, der Unterstreichung oder dem Farbwechsel, der das aktuelle Bedienelement markiert. Ohne ihn drücken sie Tab im Blindflug. Sie wissen nicht, welchem Link die Eingabetaste folgt oder in welches Feld ihre Eingabe geht, und es bleibt nur Raten oder der Blick auf die URL in der Statusleiste.
Die Seite besteht, wenn jedes per Tastatur bedienbare Element einen sichtbaren Indikator zeigt, solange es den Fokus hat. Die Standardkontur des Browsers zählt. Auf dieser Stufe legt WCAG weder Mindestgröße noch Kontrast des Indikators fest: Kriterium 1.4.11 verlangt 3:1 Kontrast zu angrenzenden Farben für vom Autor gestaltete Indikatoren, und das AAA-Kriterium 2.4.13 ergänzt Anforderungen an die Größe. Ein Fokusstil über :focus-visible, den Browser bei Tastaturbedienung zeigen, besteht.
/ Woran Seiten scheitern
- Ein Reset-Stylesheet setzt outline: none oder outline: 0 auf :focus, und nichts ersetzt es.
- Die Kontur ist nur bei Links und Schaltflächen entfernt, sodass Formularfelder den Fokus zeigen und alles andere nicht.
- Der Fokusstil existiert, aber ein Elternelement mit overflow: hidden schneidet ihn ab, sodass nichts gezeichnet wird.
- Ein eigenes Kontrollkästchen oder Optionsfeld versteckt das native input, und der gestaltete Ersatz hat keinen Fokuszustand.
- Der Indikator hat dieselbe Farbe wie der Hintergrund, auf dem er liegt, etwa ein weißer Rahmen auf einer weißen Seite.
/ So prüfen Sie es selbst
- Klicken Sie in die Adresszeile und gehen Sie dann mit Tab durch die ganze Seite. An jedem Stopp sollten Sie ohne Zögern auf das fokussierte Element zeigen können.
- Achten Sie auf den Logo-Link, Icon-Schaltflächen, eigene Kontrollkästchen, Karussellpfeile und das Cookie-Banner, wo Indikatoren am häufigsten fehlen.
- Scheint der Fokus zu verschwinden, geben Sie in der DevTools-Konsole document.activeElement ein, um das Element zu finden, das ihn hat.
- Durchsuchen Sie das CSS nach outline: none und outline: 0 und prüfen Sie, ob jede Stelle einen Ersatzstil am selben Selektor hat.
- Wiederholen Sie den Test mit einem eingeschalteten Windows-Kontrastdesign. Der Modus für erzwungene Farben zeichnet keinen box-shadow, sodass ein Indikator nur aus Schatten verschwindet.
/ So beheben Sie es
- Löschen Sie outline: none aus :focus-Regeln oder kombinieren Sie es mit einem sichtbaren Ersatz am selben Selektor.
- Ergänzen Sie einen klaren Stil wie :focus-visible { outline: 2px solid; outline-offset: 2px; } in einer Farbe, die sich vom Hintergrund abhebt.
- Wird der Rahmen mit box-shadow gezeichnet, behalten Sie daneben outline: 2px solid transparent, damit der Modus für erzwungene Farben weiterhin eine Kontur zeichnet.
- Gestalten Sie bei eigenen Kontrollkästchen und Optionsfeldern den sichtbaren Ersatz, während das versteckte input den Fokus hat, mit einem Selektor wie input:focus-visible + label.
- Suchen Sie nach einem Elternelement mit overflow: hidden, das die Kontur abschneidet, und halten Sie den Indikator mit negativem outline-offset oder etwas padding im Inneren.
/ Was unser Scanner prüft
Unsere Prüfung focus-not-visible läuft in einem echten Browser. Sie gibt nacheinander bis zu 150 Tabstopps den Fokus und vergleicht, was jedes Element davor und danach zeichnet: Kontur, Rahmen, Schatten, Hintergrund, Textfarbe und Textdekoration sowie ::before und ::after. Hat sich nichts geändert, meldet sie das Element. Einen Indikator, der an einem Eltern- oder Geschwisterelement gezeichnet wird, sieht sie nicht, und sie beurteilt nicht, ob eine Änderung deutlich genug ist.
/ Wer es verletzt, nach unseren eigenen Messungen
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Ist outline: none ein WCAG-Verstoß?
Für sich genommen entfernt die Angabe den Standard-Fokusindikator des Browsers, und wenn nichts ihn ersetzt, verstößt die Seite gegen 2.4.7. Das W3C dokumentiert das als Fehler F78. In Ordnung ist es, wenn dieselbe Regel einen anderen sichtbaren Indikator liefert, etwa einen Rahmen, einen Hintergrundwechsel oder einen box-shadow, wobei ein Schatten allein im Modus für erzwungene Farben verschwindet.
Was ist der Unterschied zwischen :focus und :focus-visible?
Der Selektor :focus greift immer, wenn ein Element den Fokus hat, auch nach einem Mausklick. Der Selektor :focus-visible greift, wenn der Browser einen Indikator für nötig hält, in der Praxis bei Tastaturnavigation und in Textfeldern. Wer :focus-visible gestaltet, vermeidet Rahmen an mit der Maus geklickten Schaltflächen und erfüllt 2.4.7 trotzdem, weil Tastaturnutzende den Indikator erhalten.
Braucht der Fokusindikator einen Mindestkontrast oder eine Mindeststärke?
Nicht nach 2.4.7, das nur Sichtbarkeit verlangt. Der Kontrast ergibt sich aus 1.4.11 Nicht-Text-Kontrast, das mindestens 3:1 zu angrenzenden Farben verlangt, wenn der Autor den Indikator gestaltet hat. Größe und eine Änderung mit 3:1 Kontrast zwischen fokussiertem und nicht fokussiertem Zustand regelt 2.4.13 Fokus-Erscheinungsbild, ein mit WCAG 2.2 hinzugekommenes Kriterium der Stufe AAA.