Techniken für WCAG 2.0

Zum Inhalt

-

G195: Benutzung einen hoch sichtbaren Fokus-Indikator, der vom Autor bereitgestellt wird

Anwendbarkeit

Allgemein anwendbar.

Die Technik bezieht sich auf:

Beschreibung

Das Ziel dieser Technik ist es, den Fokus-Indikator Im Browser zu verbessern, indem man einen sehr gut sichtbaren im Inhalt erstellt. Der Standard-Fokus-Indikator in vielen Browsern ist eine dünne, gestrichelte, schwarze Linie. Es kann schwierig sein, die Linie zu sehen, wenn sie um ein Formular-Element herum ist, das schon eine Konturlinie hat, wenn das Element mit dem Fokus in einer Tabellenzelle ist, wenn das Element mit dem Fokus sehr klein ist oder wenn der Hintergrund der Seite in einer dunklen Farbe ist.

Mit dieser Technik macht die Anwendung den Fokus sichtbarer, indem eine Kombination aus stark kontrastierenden Farben, dicker Linie und anderen visuellen Indikatoren wie beispielsweise ein Leuchten benutzt wird, wenn der Benutzer den Fokus auf ein Element setzt, indem er die Maus, die Tab-Taste, die Pfeiltasten, Tastaturkurzbefehle oder irgendeine andere Methode benutzt.

Beispiele

Beispiel 1: Links

Eine Webseite hat eine dunkle Hintergrundfarbe und hellen Taxt und Links. Wenn der Fokus auf einem Link landet, wird der Link mit einer hellgelben, 3 Pixel breiten Linie konturiert.

Beispiel 2: Formular-Elemente

Eine Webseite beinhaltet ein Formular innerhalb einer Tabelle. Die Rahmen von sowohl der Tabelle als auch den Formular-Elementen sind dünne, schwarze Linien. Der der Fokus auf einem Formular-Element landet, dann wird das Element mit einer 5-Pixel breiten, roten Linie konturiert, die teilweise transparent ist.

Beispiel 3: Menüs

Eine Webseite beinhaltet ein interaktives Menü mit Untermenüs. Ein Benutzer kann den Fokus im Menü bewegen, indem er die Pfeiltasten benutzt. Während der Fokus sich bewegt, ändert der aktuell fokussierte Menüpunkt seinen Hintergrund zu einer anderen Farbe, die ein 3:1 Kontrastverhältnis zu den umliegenden Elementen und ein 4,5:1 Kontrastverhältnis zum eigenen Text hat.

Tests

Vorgehensweise

  1. Platzieren Sie den Fokus auf jedem fokussierbaren Element der Benutzerschnittstelle auf der Seite, indem Sie die Maus benutzen.

  2. Prüfen Sie, ob es einen sehr gut sichtbaren Fokus-Indikator gibt.

  3. Platzieren Sie den Fokus auf jedem fokussierbaren Element der Benutzerschnittstelle auf der Seite, indem Sie die Tastatur benutzen.

  4. Prüfen Sie, ob es einen sehr gut sichtbaren Fokus-Indikator gibt.

Erwartete Ergebnisse

Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.