Techniken für WCAG 2.0

Zum Inhalt

-

F78: Fehler bei Erfolgskriterium 2.4.7, weil Element-Konturen und -Umrandungen so gestaltet werden, dass der visuelle Fokus-Indikator entfernt oder unsichtbar gemacht wird

Anwendbarkeit

Jede Technik

Dieser Fehler bezieht sich auf:

Beschreibung

Hier wird eine Fehlersituation beschrieben, die auftritt, wenn der visuelle Standard-Indikator des Tastatur-Fokus im Benutzeragenten ausgeschaltet wird oder durch eine andere Formatierung auf der Seite unsichtbar gemacht wird, ohne dass ein vom Autor gelieferter visueller Fokus-Indikator bereitgestellt wird. Das Abschalten des Fokus-Indikators weist den Benutzeragenten an, den Fokus-Indikator nicht darzustellen. Eine andere Formatierung kann es erschweren, den Fokus-Indikator zu sehen, auch wenn er vorhanden ist, wie z.B. Konturen, die genauso aussehen wie die Fokus-Kontur oder dicke Rahmen, welche die gleiche Farbe haben wie der Fokus-Indikator, so dass man diesen dagegen nicht sehen kann.

Beispiele

Beispiel 1: Der Fokus -Indikator ist per CSS abgeschaltet

Das folgende CSS-Beispiel entfernt den Standard-Fokus-Indikator, wodurch die Anforderung, dass ein sichtbarer Fokus-Indikator bereitgestellt werden muss, nicht erfüllt wird.

Code-Beispiel:

			:focus {outline: none}

Beispiel 2: Die Kontur von Elementen ist visuell dem Fokus-Indikator ähnlich

Das folgende CSS-Beispiel erstellt eine Kontur um Links herum, die genauso aussieht, wie der Fokus-Indikator. Damit wird es für Benutzer unmöglich festzustellen, welcher den Fokus hat, auch wenn der Benutzeragent den Fokus-Indikator zeichnet.

Code-Beispiel:

			a {outline: thin dotted black}

Beispiel 3: Elemente haben einen Rahmen, der den Fokus-Indikator verdeckt

Das folgende CSS-Beispiel erstellt einen Rahmen um Links herum, der nicht genügend Kontrast hat, damit der Fokus-Indikator gesehen werden kann, wenn er darüber gezeichnet wird. In diesem Fall wird der Fokus-Indikator gerade eben außerhalb des Rahmens gezeichnet, da aber beide schwarz sind und der Rahmen dicker ist als der Fokus-Indikator erfüllt dieser nicht mehr die Definition „sichtbar“.

Code-Beispiel:

			a {border: medium solid black}

Ressourcen

Es gibt für diese Technik keine Ressourcen.

Tests

Vorgehensweise

  1. Setzen Sie den Fokus auf alle fokussierbaren Elemente auf einer Seite.

  2. Prüfen Sie, ob der Fokus-Indikator sichtbar ist

Erwartete Ergebnisse