Das Prüfverfahren zur BITV


Sie sind hier: BITV-Test > Liste der Erfolgskriterien > Prüfkriterium 2.4.7a (52 von 60)


zum WCAG-Test wechseln


Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt

Prüfschritt 2.4.7a
Aktuelle Position des Fokus deutlich

Technische Angaben

Version bis 10.07.2017 | Aktuell
BITV-Bedingung 2.4.7 Sichtbarer Fokus
WCAG-Erfolgskriterium 2.4.7 Fokus sichtbar
Bewertungsalternativen ja / eher erfüllt / teilweise erfüllt / eher nicht erfüllt / nein / nicht anwendbar
Bezieht sich auf einzelne Webseite
Prüfschritt erfüllt Der Tastaturfokus ist deutlich zu sehen.
Prüfschritt nicht anwendbar Es gibt keine interaktiven Elemente auf der Seite

Was wird geprüft?

Der Tastaturfokus soll mindestens genau so deutlich hervorgehoben werden wie der Mausfokus.

Bei Links, die nicht auf den Mauszeiger reagieren, soll der Tastaturfokus sich zumindest deutlich von der ausgewählten Hintergrundfarbe abheben.

Versteckte Sprunglinks sollen bei Fokuserhalt eingeblendet werden.

Warum wird das geprüft?

Für den Tastaturbenutzer ist es wichtig, zu sehen, wo sich der Tastaturfokus gerade befindet, welcher Link also ausgelöst wird, wenn er die Enter-Taste drückt.

Viele Webseiten erleichtern Mausbenutzern die Bedienung, indem sie darauf reagieren, dass der Mauszeiger sich über einem Link befindet. Dann ändert sich zum Beispiel die Text- oder Hintergrundfarbe oder der Linktext wird unterstrichen. Diese Unterstützung soll auch für Tastaturbenutzer funktionieren, Webseiten sollen sie gegenüber den zahlreicheren Mausnutzern nicht benachteiligen.

Die vom Browser vorgesehene Kennzeichnung des Tastaturfokus hebt sich von dunklen Seitenhintergründen meist nicht so gut ab, wie in der "normalen" Ansicht des Browsers oder des Benutzers. Das muss dann ausgeglichen werden, zum Beispiel durch farbige Hinterlegung des angesteuerten Links.

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn die Seite interaktive Elemente enthält.

2. Prüfverfahren

  1. Seite in Firefox laden.
  2. 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.
  3. Wenn die Fokushervorhebung ausschließlich über einen Farbwechsel geschieht, prüfen, ob der Kontrastabstand zwischen fokussiertem und unfokussiertem Zustand mindestens 3:1 beträgt.
  4. 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.
  5. 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 1.4.3a "Kontraste von Texten ausreichend" ermitteln, ob der Kontrastabstand zwischen Systemfokus und Hintergrund mindestens 3:1 beträgt
  6. 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 Tastaturcursor vorhanden ist, die Webseite also den browsereigenen Tastaturcursor (zum Beispiel mit JavaScript blur() oder CSS outline:none) unterdrückt. Dann ist eventuell auch Prüfschritt 2.1.1a "Ohne Maus nutzbar" nicht erfüllt!

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 1.4.11a "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

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.

Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt