WCAG 2.0, 2.4.7, AA

Fokus sichtbar

  • WCAG: 2.0
  • Stufe: AA
  • Thema: Kontrast und Sensorik

Der Tastaturfokus muss jederzeit gut sichtbar sein. Dies ermöglicht es Menschen mit Sehbehinderungen, mit der Tastatur zu navigieren.

Verstehen

Wenn der Tastaturfokus nicht bzw. ungenügend sichtbar ist, erschwert dies die Navigation per Tastatur erheblich. Der sehr fein dargestellte Browser-Standard ist als Tastaturfokus zwar strikt gemäss WCAG ausreichend (sofern er bei allen Elementen durchgängig sichtbar bleibt), für viele Personen ist er jedoch nicht genügend gut wahrnehmbar.

Stellen Sie deshalb sicher, dass der Tastaturfokus jederzeit gut sichtbar ist, indem Sie einen prominenten Stil dafür festlegen. Ein gut sichtbarer Rahmen zeichnet fokussierte Links, Schaltflächen, Radiobuttons, Checkboxen, verlinkte grafische Elemente, etc. aus. Das CSS Attribut outline ist besonders dafür geeignet, z.B. outline: 2px dotted black.

Folgende Anforderungen sind zu berücksichtigen:

- Der Fokus sollte nicht nur durch Farbwechsel erfolgen, da dieser bei benutzerdefinierten Farben (etwa dem Windows High Contrast Mode) nicht mehr angewandt wird.

- Auch fokussierte Elemente müssen die Kontrastanforderungen erfüllen (siehe auch 1.4.3).

- Elemente, welche visuell nicht sichtbar sind, aber fokussiert werden können, müssen bei Fokus angezeigt werden (etwa Sprunglinks, siehe auch 2.4.1).

- Die Anzeige des Fokus sollte konsistent erfolgen, d.h. für möglichst viele interaktive Elemente gleichermassen zur Anwendung gelangen.

Empfehlung: Stellen Sie auch im Windows High Contrast Mode sicher, dass der Tastaturfokus genügend sichtbar ist.

Verantwortlichkeiten

  • Das Designteam definiert ein gut wahrnehmbares visuelles Design für den Fokus.
  • Das Entwicklungsteam setzt die vom Designteam definierten Vorgaben korrekt um.

WCAG-Text

Jede durch Tastatur bedienbare Benutzerschnittstelle hat einen Bedienmodus, bei dem der Tastaturfokus sichtbar ist.

Code-Beispiel

<!-- Generell sehr gut wahrnehmbarer Fokus -->
a:focus {
  outline: 2px dotted black;
}

<!-- Schlechtes Beispiel: Bei Windows High Contrast Mode nicht wahrnehmbarer Fokus (Farben Invertieren) -->
a:focus {
  color: white;
  background-color: black;
}