Sichtbarer Fokus: WCAG 2.4.7 richtig umsetzen
Also called: Fokusindikator, Fokusrahmen, Fokus-Hervorhebung, Fokus sichtbar
Definition
Sichtbarer Fokus bedeutet, dass eine Website das Element, das gerade den Tastaturfokus hat, deutlich markiert – meist mit einem Rahmen. WCAG 2.4.7 verlangt das auf Stufe AA.
Ein sichtbarer Fokus zeigt Menschen, die mit der Tastatur arbeiten, jederzeit ihre Position auf der Seite. Drücken sie Tab, bekommt der aktive Link, Button oder das Formularfeld eine deutliche Markierung – meist einen Rahmen oder Ring. Fehlt dieser Fokusindikator, tippen Tastaturnutzer ins Leere: Sie drücken Tasten, wissen aber nicht, welches Element reagiert.
Was es bedeutet
WCAG 2.4.7 Fokus sichtbar ist ein Erfolgskriterium der Stufe AA in WCAG 2.2. Jede per Tastatur bedienbare Oberfläche braucht einen Modus, in dem der Tastaturfokus sichtbar ist. Das W3C ergänzt: Die Markierung darf nicht nach ein paar Sekunden verschwinden. Über EN 301 549 (Abschnitt 9.2.4.7) gehört die Anforderung auch zum European Accessibility Act.
Wichtig ist das für alle, die auf Tastaturbedienung angewiesen sind, und für Menschen mit Einschränkungen bei Aufmerksamkeit oder Kurzzeitgedächtnis, die schnell wieder finden müssen, wo sie waren.
Wie der Fokusrahmen aussieht, legt 2.4.7 nicht fest. Das regeln andere Kriterien:
| Kriterium | Stufe | Was es ergänzt |
|---|---|---|
| 2.4.7 Fokus sichtbar | AA | Ein sichtbarer Fokusindikator muss vorhanden sein |
| 1.4.11 Nicht-Text-Kontrast | AA | Mindestens 3:1 Kontrast zu den angrenzenden Farben |
| 2.4.11 Fokus nicht verdeckt (Minimum) | AA | Das fokussierte Element darf nicht vollständig verdeckt sein, etwa durch einen fixierten Header |
| 2.4.13 Erscheinungsbild des Fokus | AAA | Genaue Vorgaben zu Größe und Kontrast der Markierung |
Der Standard-Fokus des Browsers kann ausreichen – das W3C erkennt ihn als Technik G165 an –, solange er auf Ihren Farben gut sichtbar bleibt.
Praxisbeispiele
Ein guter Fokusstil nutzt eine Farbe mit ausreichendem Farbkontrast und etwas Abstand zum Element. Die CSS-Pseudoklasse :focus-visible zeigt den Rahmen bei Tastaturbedienung, ohne ihn bei jedem Mausklick einzublenden.
<style>
/* Fehler nach 2.4.7: Fokusindikator entfernt */
a:focus, button:focus { outline: none; }
/* Richtig: deutlicher Rahmen bei Tastaturfokus, 5,98:1 auf Weiß */
a:focus-visible, button:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
</style>Ein hellgrauer Rahmen wie #cccccc auf Weiß erreicht nur 1,61:1. Er ist zwar vorhanden, aber kaum jemand sieht ihn – und er verfehlt 1.4.11.
:focus-visible mit einem durchgehenden Rahmen von 2–3 px in einer kräftigen Markenfarbe gestalten, outline-offset ergänzen und den Fokus auch auf dunklen Bereichen, Bildern und Buttons prüfen.
outline: none ohne Ersatz setzen, den Fokus nur durch eine leichte Farbänderung andeuten oder zulassen, dass ein fixierter Header das fokussierte Element verdeckt.
So prüfen Sie den sichtbaren Fokus
Häufige Fragen
Was bedeutet sichtbarer Fokus nach WCAG?
WCAG 2.4.7 Fokus sichtbar (Stufe AA) verlangt, dass Tastaturnutzer immer erkennen, welches Element den Fokus hat. Meist zeigt das ein Rahmen oder Ring um den aktiven Link, Button oder das Feld.
Ist outline: none ein Barrierefreiheitsfehler?
Nur ohne Ersatz. Wer den Rahmen entfernt und keinen anderen sichtbaren Fokusstil setzt, verstößt gegen WCAG 2.4.7 (W3C-Fehler F78). Ein eigener, deutlicher Stil ist dagegen völlig in Ordnung.
Wie viel Kontrast braucht ein Fokusrahmen?
WCAG 2.4.7 nennt keine Zahl. Fokusindikatoren sind aber grafische Bedienelemente, daher verlangt WCAG 1.4.11 mindestens 3:1 zu den angrenzenden Farben. Das AAA-Kriterium 2.4.13 ist strenger.
Was ist der Unterschied zwischen :focus und :focus-visible?
:focus greift bei jedem fokussierten Element, auch nach einem Mausklick. Bei :focus-visible entscheidet der Browser, wann ein Fokusring hilft – typischerweise bei Tastaturbedienung. So behalten Tastaturnutzer ihren Fokusrahmen, ohne dass bei jedem Klick einer erscheint.
Kann allyWay einen fehlenden sichtbaren Fokus automatisch beheben?
Ja. allyWay ergänzt deutliche Fokusrahmen an Links, Buttons und Feldern, wo sie fehlen – als Teil der automatischen Korrekturen. Da Fokusrahmen eine sichtbare Änderung sind, gehen sie erst nach Ihrer Freigabe live, und Ihr Code und Theme bleiben unverändert. Kostenlos starten und Tastaturnutzern einen klaren Weg durch Ihre Website geben.
Related terms
Tastaturbedienung: WCAG 2.1.1 einfach erklärt
Tastaturbedienung bedeutet, dass sich jede Funktion einer Website allein mit der Tastatur erreichen und bedienen lässt – meist mit Tab, Umschalt+Tab, Enter, Leertaste und Pfeiltasten. WCAG 2.1.1 verlangt das auf Stufe A.
Read definition: Tastaturbedienung: WCAG 2.1.1 einfach erklärtFarbkontrast: WCAG-Kontrastverhältnis einfach erklärt
Farbkontrast ist der Helligkeitsunterschied zwischen Text oder Bedienelementen und ihrem Hintergrund, angegeben als Verhältnis von 1:1 bis 21:1. Die WCAG verlangen mindestens 4,5:1 für normalen und 3:1 für großen Text.
Read definition: Farbkontrast: WCAG-Kontrastverhältnis einfach erklärtTastaturfalle: WCAG 2.1.2 erklärt und behoben
Eine Tastaturfalle ist ein Bereich einer Seite, in den der Tastaturfokus hineinkommt, aus dem er aber nicht allein per Tastatur wieder herauskommt. WCAG 2.1.2 Keine Tastaturfalle verbietet das auf Stufe A.
Read definition: Tastaturfalle: WCAG 2.1.2 erklärt und behobenSkip-Link: Direkt zum Hauptinhalt springen
Ein Skip-Link ist ein Link ganz oben auf der Seite, der direkt zum Hauptinhalt springt. So müssen Tastatur- und Screenreader-Nutzer nicht auf jeder Seite das ganze Menü durchlaufen. Er ist eine ausreichende Technik für WCAG 2.4.1.
Read definition: Skip-Link: Direkt zum Hauptinhalt springen