WCAG 2.2 · Level AAA · Bedienbar · NeuBarrierefreiheit als Cloud-Service
2.4.13 Fokus-Erscheinungsbild
Fokusindikatoren müssen ausreichend groß und kontrastreich sein.
Auf einen Blick
Was bedeutet dieses Kriterium?
Kurz gesagt
Fokusindikatoren müssen ausreichend groß und kontrastreich sein.
Aufwand
Mittel umzusetzen, mittel erledigt
Betrifft Rolle
Design, Entwicklung
Konformitätsstufe
Level AAA · Neu in WCAG 2.2
EN 301 549
Abschnitt 9.2.4.13 (nicht referenziert, AAA) · BITV 2.0 · BFSG
Verständlich erklärt
Was heißt 2.4.13 für die Praxis?
Fokusindikatoren müssen ausreichend groß und kontrastreich sein.
Gestalten Sie Fokusringe mit mindestens 2px Dicke und 3:1 Kontrast zum Hintergrund UND zum Element.
Technisch formuliert: Fokusindikatoren müssen eine ausreichende Größe (mindestens 2 CSS-Pixel dick) und einen Kontrast von mindestens 3:1 aufweisen.
Wer ist betroffen?
Ein Alltagsbeispiel
Bedienbarkeit bedeutet: jeder Mensch kann die Seite nutzen — egal ob mit Maus, Tastatur, Touchscreen oder Sprachsteuerung. Wer dieses Kriterium verletzt, schließt Nutzer aus, die auf eine bestimmte Eingabemethode angewiesen sind. Besonders betroffen sind: Tastaturnutzer, Menschen mit motorischen Einschränkungen, Sehbehinderte Menschen.
Die Lösung
So setzen Sie es richtig um
Gestalten Sie Fokusringe mit mindestens 2px Dicke und 3:1 Kontrast zum Hintergrund UND zum Element.
Fokusindikatoren müssen eine ausreichende Größe (mindestens 2 CSS-Pixel dick) und einen Kontrast von mindestens 3:1 aufweisen.
Umsetzung
Schritt für Schritt
Konkrete Anleitung zur praktischen Umsetzung dieses Kriteriums.
- 1
Fokus-Stil definieren
outline: 3px solid #005fcc; outline-offset: 2px; — mindestens 2px dick.
- 2
Kontrast zur Umgebung sicherstellen
Der Fokusindikator muss sowohl zum Hintergrund als auch zum fokussierten Element 3:1 Kontrast aufweisen.
Praxisbeispiele
So nicht — sondern so
So nicht
outline: 1px dotted gray;
Sondern so
outline: 3px solid #005fcc; outline-offset: 2px;
Warum?
Dicker, farbiger Rahmen mit ausreichendem Kontrast.
Typische Fehler
Das wird häufig falsch gemacht
Diese Fehler sehen wir in der Praxis besonders oft — und wie Sie sie vermeiden.
Nur mit der Maus testen
Entwickler nutzen beim Testen fast immer die Maus. Viele Probleme werden erst sichtbar, wenn man die Tastatur verwendet. Der Tab-Test sollte Routine sein.
Hover-Effekte als einzige Interaktion
Was nur per Hover funktioniert, ist per Tastatur unbedienbar. Interaktionen sollten immer auch per Fokus oder Klick auslösbar sein.
Selbst prüfen
So testen Sie dieses Kriterium
Mit diesen Methoden können Sie selbst prüfen, ob Ihre Webseite das Kriterium erfüllt.
Tastatur-Test
Legen Sie die Maus beiseite. Navigieren Sie ausschließlich mit Tab, Umschalt+Tab, Enter, Leertaste und Pfeiltasten durch die Seite. Alles erreichbar? Alles bedienbar?
Fokusindikator prüfen
Bei jeder Tastaturnavigation sollte ein sichtbarer Fokusring das aktuell aktive Element markieren. Ist er überall gut sichtbar?
Mit Screenreader und Tastatur
Kombinieren Sie Screenreader-Ansage und Tastaturnavigation. So simulieren Sie die tägliche Nutzung blinder Menschen.
Häufige Fragen
Fragen und Antworten
Ist Level AAA verpflichtend?▾
Wie kann ich prüfen, ob meine Seite dieses Kriterium erfüllt?▾
Welche anderen Kriterien hängen damit zusammen?▾
Verwandte Kriterien
Weiterführende Erfolgskriterien
Diese Kriterien stehen in engem Zusammenhang mit 2.4.13 und sollten gemeinsam betrachtet werden.