Was wird geprüft?
Der Tastaturfokus soll deutlich hervorgehoben werden. Wenn Autoren keine eigene Fokushervorhebung umsetzen, darf die Standardhervorhebung durch den Browser nicht über CSS unterdrückt werden. Der Kontrast der Fokushervorhebung (z.B. Fokusrahmen um Elemente, Unterstreichung, Farbumkehr) zum nicht-fokussierten Zustand muss mindestens 3:1 betragen.
Versteckte Sprunglinks sollen bei Fokuserhalt eingeblendet werden.
Warum wird das geprüft?
Für Tastaturnutzende ist es wichtig, zu sehen, wo sich der Tastaturfokus gerade befindet, also welcher Link oder Schalter ausgelöst wird, wenn sie die Enter-Taste drücken, oder welches Eingabefeld oder andere Formularelement gerade den Fokus hat.
Wie wird geprüft?
1. Anwendbarkeit des Prüfschritts
Der Prüfschritt ist anwendbar, wenn die Seite interaktive Elemente enthält.
2. Prüfung
Seite in Firefox laden.
Alle Bedienelemente mit Tabulator durchlaufen und prüfen, ob sie mit grafischen Veränderungen auf den Fokus reagieren (zum Beispiel mit Farbwechseln, Unterstreichungen oder eingeblendeten Symbolen). Versteckte Sprunglinks sollen bei Fokuserhalt eingeblendet werden.
Wenn die Fokushervorhebung ausschließlich über einen Farbwechsel geschieht, prüfen, ob der Kontrastabstand zwischen fokussiertem und unfokussiertem Zustand mindestens 3:1 beträgt. Ist dies nicht der Fall, ist der Prüfschritt 9.1.4.1 Ohne Farben nutzbar nicht erfüllt.
Wenn nur der Standard-Browser-Tastaturfokus (Systemkranz) erscheint, prüfen, ob dieser an dieser vor gestalteten (also etwa über CSS gefärbten) Hintergründen gut zu erkennen ist.
In Zweifelsfällen gemäß Prüfschritt 9.1.4.11 Kontraste von Grafiken und grafischen Bedienelementen ausreichend ermitteln, ob der Kontrastabstand zwischen Systemfokus und Hintergrund mindestens 3:1 beträgt. Ist dies nicht der Fall, ist der Kontrast-Prüfschritt 9.1.4.11 nicht erfüllt.
Seite im Chrome Browser laden und die Schritte 2-5 wiederholen.
3. Hinweise
Die Prüfung muss mit aktiviertem JavaScript erfolgen.
Der Prüfschritt ist nicht erfüllt, wenn überhaupt kein Tastaturfokus vorhanden ist, die Webseite also den browsereigenen Tastaturfokus (zum Beispiel mit JavaScript
blur()oder CSSoutline:none) unterdrückt.Grundsätzlich hat sich die Standard-Hervorhebung des Tastaturfokus im Browser bei fehlender Gestaltung durch Autoren in den letzten Jahren verbessert. Abhängig von Betriebssystem und Browser, der Hintergrundfarbe und anderen Aspekten des Designs ist die Standard-Hervorhebung der Browser in manchen Fällen jedoch nicht gut sichtbar. Eine gezielte Gestaltung in CSS, z.B. über die
:focusPseudo-Klasse, stellt sicher, dass der Tastaturfokus immer gut sichtbar ist.Wenn die Fokushervorhebung von Links oder Buttons nur über die Änderung der Text- oder Hintergrundfarbe vermittelt wird, beträgt deren Kontrastabstand zum unfokussierten Zustand mindestens 3:1. Ist dies nicht der Fall ist ggf. der Prüfschritt 9.1.4.1 Ohne Farben nutzbar nicht erfüllt.
Wenn nur der Standard-Browser-Tastaturfokus angezeigt wird und dieser vor gestalteten Hintergründen sichtbar ist, dann ist dieser Prüfschritt erfüllt (der Fokus ist sichtbar). Gegebenenfalls ist aber 9.1.4.11 Kontraste von Grafiken und grafischen Bedienelementen ausreichend nicht erfüllt, wenn der Kontrast des Tastaturfokus vor gestaltetem Hintergrund unzureichend ist. Die Bewertung wird dann im Kontrast-Prüfschritt 9.1.4.11 vorgenommen.
4. Bewertung
Erfüllt
Die Fokussierung interaktiver Elemente ist visuell wahrnehmbar: Rahmen, Unterstreichung, Farbumkehr, Formänderungen oder zusätzliche Markierungen werden bei Tastaturfokussierung eingesetzt oder die Standard-Fokushervorhebung durch den Browser wird nicht unterdrückt.
Nicht voll erfüllt
Sprunglinks bleiben bei Fokuserhalt versteckt.
interaktive Elemente erhalten keinen sichtbaren Tastatur-Fokus
Nicht erfüllt
Der Standard-Browser-Tastaturfokus wird komplett unterdrückt, bei Tastaturnutzung wird kein Fokus angezeigt.
Einordnung des Prüfschritts
Bezug zu 1.4.11 Non-Text Contrast (Sichtbarkeit der Fokushervorhebung)
Der Understanding-Text zur WCAG Anforderung 1.4.11 Non-Text Contrast führt im Abschnitt "Relationship with Use of Color and Focus Visible" aus:
In combination with 2.4.7 Focus Visible, the visual focus indicator for a component must have sufficient contrast against the adjacent background when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author.
Einordnung des Prüfschritts nach WCAG 2.2
Guideline
Success criterion
2.4.7 Focus Visible (Level AA)
1.4.11 Non-Text Contrast (Level AA)
Techniques
General Techniques
CSS Techniques
Client-side Scripting Techniques
Failures
Fragen zu diesem Prüfschritt
Ist die Anzeige des Fokus nicht Sache des Browsers?
Alle Browser zeigen dem Tastaturnutzer in irgendeiner Weise, wo der Fokus ist, wenn diese Anzeige nicht aktiv unterdrückt wird.
Dennoch ist die Anzeige des Fokus nicht allein Sache des Browsers. Die Webseite legt fest, wie sie im Browser aussehen soll. Sie ändert etwa die Farben fokussierter Links und Linkhintergründe oder setzt andere Gestaltungselemente ein. In dieser von der Webseite festgelegten Umgebung muss der Fokus für Tastaturnutzer gut sichtbar sein.