Prüfpunkt 2.4.13Stufe AAATastatur und Fokus
Wie sieht ein Fokusrahmen aus, der wirklich auffällt?
Der Fokusrahmen zeigt Tastaturnutzern, wo sie sind. Die Stufe AA (2.4.7) verlangt nur, dass er sichtbar ist; ein dünner, blasser Rahmen erfüllt das. Das Kriterium 2.4.13 der Stufe AAA legt Maße fest: Der Fokusrahmen umschließt das Element mit einer Linie von mindestens 2 CSS-Pixel Dicke, und die Fläche, die sich beim Fokus ändert, hat einen Kontrast von mindestens 3:1 zwischen fokussiertem und nicht fokussiertem Zustand.
Was das Kriterium verlangt
Zwei Maße, beide messbar. Erstens die Fläche: Der Fokusrahmen ist mindestens so groß wie ein 2 Pixel dicker Umriss um das Element; ein Unterstrich allein oder ein 1-Pixel-Rahmen reicht nicht. Zweitens der Kontrast: Die Pixel, die sich beim Fokus ändern, unterscheiden sich vom Zustand ohne Fokus um mindestens 3:1. Ein dunkelblauer Rahmen auf einem dunkelblauen Knopf fällt durch, ein weißer Rahmen mit dunklem Saum auf jedem Hintergrund besteht.
Ein Rahmen, der auf jedem Hintergrund funktioniert
Weil Knöpfe hell und dunkel sein können, bewährt sich ein zweifarbiger Fokus: ein Umriss von 2 Pixel in einer kräftigen Farbe mit 2 Pixel Abstand zum Element (outline-offset) und ein zusätzlicher Schatten in der Gegenfarbe. So bleibt der Kontrast auf hellen wie dunklen Flächen erhalten. Der Standard-Fokus des Browsers ist oft zu dünn oder wird vom Stylesheet mit outline: none entfernt; dieses Verbot ist der häufigste Grund für unsichtbaren Fokus.
So gehen wir damit um
Die Messung fokussiert jedes Bedienelement, vergleicht die Bildpunkte vor und nach dem Fokus und misst Dicke und Kontrast der Änderung. Damit ist das Kriterium vollständig automatisch prüfbar; die Stufe-AA-Prüfung (Fokus sichtbar) liefert dieselben Daten. Das Kriterium gehört zur Kategorie AAA im Wissen; im Bericht stehen Dicke und Kontrast je Fundstelle.
Beispiele
Dünner blasser Fokusrahmen
:focus-visible { outline: 1px dotted #cccccc; }:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
box-shadow: 0 0 0 5px #ffffff;
}Mindestens 2 Pixel Umriss, und die geänderten Pixel unterscheiden sich vom Zustand ohne Fokus um 3:1. Der weiße Schatten hält den Kontrast auf dunklen Flächen.
So gehen Sie es an
- Entfernen Sie jedes outline: none aus dem Stylesheet, das nicht sofort einen eigenen Fokus definiert.
- Definieren Sie einen globalen Fokus mit :focus-visible: outline von 3 Pixel, outline-offset von 2 Pixel, in einer Farbe mit 3:1 zum Hintergrund.
- Ergänzen Sie einen Schatten in der Gegenfarbe, damit der Rahmen auf hellen und dunklen Flächen sichtbar bleibt.
- Gehen Sie mit der Tabulatortaste durch die Seite und prüfen Sie jeden Zustand: Menü, Knöpfe, Felder, Links im Text.
Weiter im Prüfbereich Barrierefreiheit
- Wie groß muss eine Schaltfläche für Finger und zittrige Hände sein?WCAG 2.2 Kriterium 2.5.5 (Stufe AAA): Ziele für Zeiger sind mindestens 44 × 44 CSS-Pixel groß, außer Links im Fließtext. Messbar, mit klaren Ausnahmen.
- Warum sollen Maus, Finger, Stift und Tastatur gleichzeitig funktionieren?WCAG 2.2 Kriterium 2.5.6 (Stufe AAA): Eine Website schließt keine Eingabeart aus und lässt den Wechsel zwischen Maus, Touch, Stift und Tastatur zu.
- Wie erklärt eine Website ungewöhnliche Wörter und Fachbegriffe?WCAG 2.2 Kriterium 3.1.3 (Stufe AAA): Für Fachwörter, Redewendungen und Jargon gibt es eine Erklärung, etwa ein Glossar oder eine Definition im Text.
- Wie werden Abkürzungen auf einer Website verständlich?WCAG 2.2 Kriterium 3.1.4 (Stufe AAA): Für jede Abkürzung gibt es die ausgeschriebene Form oder eine Erklärung, beim ersten Vorkommen oder über abbr.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: Glenn Carstens-Peters, CC0
.jpg){kind=link}