WCAG 2.4.7 Fokus sichtbar

Das Erfolgskriterium 2.4.7 sorgt dafür, dass Tastaturnutzer sehen, wo sie sich auf der Seite befinden. Ohne sichtbaren Fokusindikator ist das Drücken von Tab, als bewegte man eine Maus mit unsichtbarem Zeiger: Sehende Tastaturnutzer — Menschen mit motorischen Einschränkungen, viele Menschen mit Sehbehinderung, erfahrene Nutzer — können nicht erkennen, welcher Link oder Button reagieren wird. Es gehört zur Konformitätsstufe AA und ist Teil von EN 301 549 (Abschnitt 9.2.4.7). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Jede per Tastatur bedienbare Benutzeroberfläche hat einen Bedienmodus, in dem der Fokusindikator der Tastatur sichtbar ist.

In der Praxis: Immer wenn ein Element per Tastatur den Fokus erhält, gibt es einen sichtbaren Indikator — den Standardrahmen des Browsers oder einen eigenen Stil. Dokumentierte Fehler:

• Styling, das den Fokusindikator entfernt oder verbirgt (outline: none, outline: 0 oder ein Rahmen, der ihn verdeckt), ohne sichtbaren Ersatz;
• Skripte, die einem Element den Fokus entziehen, sobald es ihn erhält.

WCAG 2.2 hat außerdem 2.4.13 Fokus-Darstellung auf Stufe AAA eingeführt, mit Regeln zu Größe und Kontrast des Indikators; auf Stufe AA ist nur die Sichtbarkeit verlangt.

Typische Fehler in Onlineshops

• ein Theme-Reset mit *:focus { outline: none; }, um den „hässlichen“ Rahmen nach Mausklicks zu verbergen;
• Buttons und Farbfelder mit eigenem Stil, der bei Fokus nur die Farbe minimal ändert;
• ein Fokusrahmen in derselben Farbe wie der Markenhintergrund, sodass er auf farbigen Bannern verschwindet;
• eigene Checkboxen und Radiobuttons, bei denen das echte Eingabefeld verborgen ist und sein Fokus am visuellen Ersatz nicht angezeigt wird;
• Produktkarten, bei denen der Fokus auf einen unsichtbaren Overlay-Link geht.

So prüfen Sie es

Automatisch: Für dieses Kriterium gibt es keine axe-core-Regel. Ob der Fokus sichtbar ist, hängt davon ab, was sich auf dem Bildschirm ändert, wenn ein Element fokussiert wird — das vergleicht axe nicht, deshalb ist eine manuelle Prüfung nötig.

Manuell: Gehen Sie die ganze Seite mit Tab durch, einschließlich Header, Mega-Menü, Filter, Produktoptionen, Warenkorb-Schublade, Formulare und Footer. An jedem Halt sollten Sie deutlich sehen, welches Element den Fokus hat. Prüfen Sie auf hellen und dunklen Hintergründen und in Pop-ups. Verschwindet der Indikator, suchen Sie im CSS nach outline: none oder :focus-Regeln.

So beheben Sie es

• Entfernen Sie den Rahmen nie ohne Ersatz. Verwenden Sie :focus-visible, um Tastaturnutzern einen kräftigen Rahmen zu zeigen und Mausklicks trotzdem sauber zu halten.
• Ein robuster Stil: :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } oder ein zweifarbiger Rahmen, der auf jedem Hintergrund funktioniert.
• Zeigen Sie den Fokus am sichtbaren Teil eigener Bedienelemente (zum Beispiel am gestalteten Farbfeld, nicht am verborgenen Eingabefeld).
• Streben Sie 3:1 Kontrast gegenüber angrenzenden Farben an, damit der Rahmen gut zu sehen ist.

Verwandte Kriterien

• 2.4.11 Fokus nicht verdeckt (Minimum) — das fokussierte Element darf nicht hinter anderen Inhalten verborgen sein.
• 1.4.11 Nicht-Text-Kontrast — visuelle Teile von Bedienelementen brauchen 3:1 Kontrast.
• 2.4.3 Fokus-Reihenfolge — der Fokus muss sich in einer logischen Reihenfolge bewegen.

Häufige Fragen

Ist outline: none ein WCAG-Verstoß?

Es verstößt gegen 2.4.7, wenn es den Fokusindikator entfernt und nichts anderes anzeigt, wo der Fokus ist. Den Standardrahmen zu entfernen, ist in Ordnung, wenn Sie ihn durch einen deutlich sichtbaren eigenen Stil ersetzen.

Was ist der Unterschied zwischen 2.4.7 Fokus sichtbar und 2.4.13 Fokus-Darstellung?

2.4.7 (Stufe AA) verlangt nur, dass ein Fokusindikator sichtbar ist. 2.4.13 Fokus-Darstellung (Stufe AAA, neu in WCAG 2.2) legt eine Mindestgröße und eine Kontraständerung von 3:1 für den Indikator fest.

Braucht der Fokusindikator einen Mindestkontrast?

Nach 2.4.7 selbst nicht. Ein Fokusrahmen ist aber ein visueller Teil eines Bedienelements, daher ist 1.4.11 Nicht-Text-Kontrast (3:1) relevant, und ein Indikator, den in der Praxis niemand sieht, macht den Fokus nicht sichtbar.