Deutlicher Fokus

Silktide prüft, ob Steuerelemente auf Ihrer Seite – Links, Schaltflächen und Formularfelder – ihr Aussehen ausreichend deutlich ändern, wenn sie mit der Tastatur ausgewählt werden. Es genügt nicht, dass irgendeine Änderung vorhanden ist; sie muss großflächig und kontrastreich genug sein, um tatsächlich gesehen zu werden.

Dies ist eine strengere Version von Sichtbarer Fokus: Dort wird nur geprüft, ob überhaupt ein Fokusindikator vorhanden ist, während hier gemessen wird, ob der Indikator auffällig genug ist.

Sie können es selbst ausprobieren: Laden Sie eine Seite und drücken Sie wiederholt die Tabulator-Taste. Jedes Steuerelement, auf dem Sie landen, sollte sich sichtbar verändern, z. B. durch eine deutliche Umrandung oder einen kontrastierenden Hintergrund.

Warum das wichtig ist

Menschen, die per Tastatur navigieren – darunter viele mit motorischen Beeinträchtigungen und Nutzende von Schaltergeräten – sind darauf angewiesen, sehen zu können, wo sich der befindet. Ein Fokusindikator, der zwar technisch vorhanden ist, aber blass, dünn oder kontrastarm, ist so nutzlos wie gar keiner: Die Person verliert die Orientierung auf der Seite und kann nicht erkennen, welches Steuerelement durch Drücken der Eingabetaste aktiviert wird.

So beheben Sie das Problem

Die einfachste zuverlässige Lösung ist eine durchgehende Umrandung um das fokussierte Steuerelement, mindestens 2 Pixel dick, in einer Farbe, die sowohl zum Steuerelement als auch zu seiner Umgebung ausreichenden Kontrast bietet.

Ein zweifarbiger Indikator stellt die Sichtbarkeit unabhängig vom Hintergrund sicher:

\/* Eine transparente Outline erhält den Indikator im Modus erzwungener Farben *\/
:focus {
  outline: 2px solid transparent;
  \/* Heller Halo + dunkler Ring: Einer von beiden steht immer im Kontrast *\/
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

Dieser Ansatz stammt aus der WCAG‑Technik C40.

Vermeiden Sie Indikatoren nur an einer Kante, etwa eine untere Rahmenlinie: Ob sie groß genug sind, hängt von der Länge dieser Kante ab – und die variiert bei Textlinks.

So testet Silktide dies

Simulation einer Tastaturnutzung, die alle fokussierbaren Elemente auf der Seite der Reihe nach mit Tab anspringt; dabei werden Elemente übersprungen, die Sie von der Prüfung ausgeschlossen haben, die für sehende Nutzende verborgen sind oder die ein tabindex von -1 haben.
Vergleich der Stile jedes Elements in fokussiertem und nicht fokussiertem Zustand.
Als bestanden gelten Elemente, die die Standard‑Fokusumrandung des Browsers beibehalten, oder deren Hintergrundfarbe sich mit einem Kontrast von mindestens 3:1 zwischen den beiden Zuständen ändert.
Andernfalls werden Umrandungen, Rahmen und Schatten beider Zustände gemessen und die Fläche gezählt, die sich mit ausreichendem Kontrast ändert. Um zu bestehen, muss diese Fläche mindestens so groß sein wie eine 2‑Pixel‑dicke Umrandung um das Element, gemäß der Anforderung 2.4.13.

Fehlerbehebung

Der Fokusstil benötigt JavaScript, um zu erscheinen

Fokusstile sollten ausschließlich in definiert sein. Wenn der Fokus per angewendet wird – z. B. ein Skript, das eine Klasse hinzufügt –, kann es sein, dass Silktide dies nicht beobachtet, und es funktioniert möglicherweise nicht für unterstützende Technologien ohne physische Tastatur. Deaktivieren Sie testweise JavaScript und springen Sie per Tab durch die Seite, um dies zu prüfen.

Fokusstile, die wir nicht messen können

Manche Arten der Fokusdarstellung lassen sich nicht automatisch erkennen oder messen:

Fokus, der mit Pseudoelementen wie ::before oder ::after gezeichnet wird.
Fokus, der per :focus-within auf einem Container angewendet wird.
Fokusstile, die auf Kindelemente vererbt werden, z. B. ein <span> in einem Link. Einige dieser Fälle werden erkannt, aber nicht alle Varianten.

Elemente, die diese Techniken verwenden, werden übersprungen statt beanstandet.

Elemente über Bildern oder mit unvorhersehbaren Hintergründen

Der Kontrast wird gegenüber einer bekannten Hintergrundfarbe berechnet. Liegt ein Element über einem Bild oder ist außerhalb seines Elternteils positioniert, sodass sein Hintergrund nicht bestimmt werden kann, überspringt Silktide es, statt zu raten.

Unerwartete Elemente sind fokussierbar

Tags wie <div> oder <span> werden fokussierbar, wenn sie einen tabindex von 0 oder höher erhalten – so unterstützen benutzerdefinierte Steuerelemente die Tastaturnutzung. Wenn eines in Ihren Ergebnissen auftaucht, ist es tatsächlich per Tastatur erreichbar und benötigt einen Fokusstil. Siehe tabindex bei MDN.