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.
Bei Links, die sich nicht grafisch verändern, prüfen, ob sie auf den Mauszeiger reagieren.
Wenn dies der Fall ist: Abbruch oder weiter mit 6.
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 bzw. 9.1.4.3 Kontraste von Texten ausreichend ermitteln, ob der Kontrastabstand zwischen Systemfokus und Hintergrund mindestens 3:1 beträgt
Seite im Chrome Browser laden und die Schritte 2-7 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. Dann ist eventuell auch Prüfschritt 9.2.1.1 "Ohne Maus nutzbar" nicht erfüllt!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.
4. Bewertung
Erfüllt
Die Fokussierung interaktiver Elemente ist visuell wahrnehmbar:
Rahmen, Unterstreichung, Farbumkehr, Formänderungen oder zusätzliche Markierungen werden bei Tastaturfokussierung eingesetzt.
Wenn die Fokussierung von Links oder Buttons nur über die Änderung der Text- oder Hintergrundfarbe vermittelt wird, beträgt deren Kontrastabstand zum unfokussierten Zustand mindestens 3:1.
Wenn nur der Standard-Browser-Tastaturfokus angezeigt wird, ist dieser vor gestalteten Hintergründen ausreichend sichtbar, er erfüllt den Prüfschritt 9.1.4.11 "Kontraste von Grafiken und grafischen Bedienelementen ausreichend".
Nicht voll erfüllt
Sprunglinks bleiben bei Fokuserhalt versteckt.
Nicht erfüllt
Der Standard-Browser-Tastaturfokus wird 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. If the focus state relies on a change of color (e.g., changing only the background color of a button), then changing from one color to another that has at least a 3:1 contrast ratio with the previous state of the control is a method for meeting the Focus visible criteria.
Einordnung des Prüfschritts nach WCAG 2.1
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.