Stufe AA · WCAG 2.0
2.4.7 Fokus sichtbar
Jedes per Tastatur bedienbare Element zeigt sichtbar, wenn es den Fokus hat.
Teilweise automatisch Manche Verstöße sind erkennbar, der Rest braucht Bewertung.
Woran es in der Praxis scheitert
outline: none im Reset-Stylesheet, nie ersetzt. Ein eigener Fokusstil, der nur auf Buttons greift und Links unsichtbar lässt.
Wie man es repariert
Entfernen Sie die Outline nie, ohne etwas mindestens ebenso Sichtbares an ihre Stelle zu setzen. :focus-visible gibt Mausnutzern das gewünschte Verhalten, ohne Tastaturnutzern die Anzeige zu nehmen.
Auf einen Blick
- Stufe
- Stufe AA — die Stufe, die EN 301 549 verlangt, und damit die, an der BFSG und EAA gemessen werden.
- Prinzip
- Bedienbar
- Richtlinie
- 2.4 Navigierbar
- Neu in
- WCAG 2.0
- EN 301 549
- 9.2.4.7
- Englische Bezeichnung
- Focus Visible
- Automatische Prüfung
- Teilweise automatisch
So prüfen Sie es von Hand
- Gehen Sie mit Tab durch die Seite und behalten Sie den Bildschirm im Blick: Sehen Sie an jeder Station, wo Sie sind, ohne zu suchen?
- Suchen Sie nach
outline: noneohne Ersatz – dem häufigsten Fehler – und nach Anzeigen, die zwar existieren, aber zu blass sind, um aufzufallen. - Prüfen Sie auf jedem Hintergrund: Ein Fokusring, der auf Weiß sichtbar ist, kann auf der Markenfarbe oder einem Foto verschwinden.
- Beziehen Sie alles ein, was sich darüber öffnet – Menüs, Dialoge, Cookie-Banner. Auch dort muss der Fokus sichtbar sein.
Im Code
*:focus { outline: none; }:focus-visible {
outline: 3px solid #1a56db;
outline-offset: 2px;
}Teilweise automatisch
Wie weit eine automatische Prüfung kommt
Ein Werkzeug findet hier einen Teil der Verstöße und sieht den Rest nicht. Ein sauberes automatisches Ergebnis heißt: die vorhandenen Prüfungen haben nichts gefunden — nicht, dass das Kriterium erfüllt ist. Genau diese Lücke lässt einen grünen Scan wie eine barrierefreie Website aussehen, und genau dort arbeiten der Tastatur-Agent, die Agenten in Entwicklung und ein Mensch weiter.
Der Tastatur-Agent tabbt durch jede Seite und hält fest, was an jeder Station sichtbar ist — eine fehlende Anzeige erscheint als Screenshot statt als Regel-ID.
Regeln, die dieses Kriterium prüfen
keyboard:focus-visibleFokus nicht sichtbar Tastatur-Agentkeyboard:focus-invisibleFokus auf unsichtbarem Element Tastatur-Agent
Die Regel-IDs stammen aus axe-core (Version 4.14.0), der Open-Source-Engine, auf der unser Scan läuft, und von unserem Tastatur-Agenten – so heißen sie auch in einem Bericht oder im CI-Log. Eine unterstrichene ID hat hier eine eigene Seite.
Wo es besonders zählt
Leitfäden, in denen dieses Kriterium zu den ersten Prüfpunkten gehört.
Verwandte Kriterien
Weitere Kriterien unter derselben Richtlinie.
Weiterlesen
-
Tastatur-Agent
Tastaturtest für Ihre Website: Der Agent drückt echte Tasten, findet Tastaturfallen und unsichtbaren Fokus und belegt jeden Schritt mit einem Protokoll.
-
Fokusindikator
Die sichtbare Markierung des Elements, das den Tastaturfokus hat, meist ein Rahmen; sie muss sichtbar sein (WCAG 2.4.7, Stufe AA).
-
keyboard:focus-visible
Kein sichtbarer Tastaturfokus verstößt gegen WCAG 2.4.7. Warum outline: none so oft die Ursache ist und wie Sie es mit :focus-visible lösen.
Finden Sie heraus, welche Kriterien Ihre Website verfehlt
Wir prüfen bis zu 100 Seiten gegen WCAG 2.2 AA, schicken den Tastatur-Agenten durch die Seite, die Sie benennen, und senden Ihnen den Bericht per E-Mail — einmal, kostenlos, ohne Bedingungen.