Sichtbarer Fokus

Silktide prüft, dass Steuerelemente auf Ihrer Seite – Links, Schaltflächen und Formularfelder – sichtbar ihr Aussehen ändern, wenn sie mit der Tastatur ausgewählt werden. Ohne eine sichtbare Veränderung können Tastaturnutzende nicht erkennen, wo sie sich auf der Seite befinden.

Probieren Sie es selbst aus: Laden Sie eine Seite und drücken Sie wiederholt die Tabulator-Taste. Jedes Steuerelement, auf dem Sie landen, sollte sein Aussehen ändern, zum Beispiel einen Rahmen erhalten oder eine andere Hintergrundfarbe.

Jedes Standard-Browser-Steuerelement zeigt den Fokus standardmäßig an; ein Fehlschlag hier bedeutet fast immer, dass ein Stylesheet den Standardindikator ausgeschaltet hat oder ein benutzerdefiniertes Steuerelement ohne einen solchen erstellt wurde.

Warum das wichtig ist

Menschen, die keine Maus verwenden können, navigieren mit der Tabulator-Taste, und die Fokusanzeige ist ihre einzige Möglichkeit zu erkennen, auf welchem Steuerelement sie sich befinden. Wenn sie entfernt wird – oft, weil die Standardkontur als unschön empfunden wurde –, bleiben Tastaturnutzende blind Tasten drückend zurück, ohne zu wissen, was das Drücken der Eingabetaste auslösen wird.

So beheben Sie das Problem

Finden Sie heraus, wo Ihr den Fokus deaktiviert – typischerweise eine Regel wie outline: none oder outline: 0 – und entfernen Sie sie.
Wenn Sie die Standardkontur ersetzen, stellen Sie im :focus-Zustand eine deutliche Alternative bereit:

\/* Stellt eine sichtbare Markierung für fokussierte Felder wieder her *\/
input:focus {
  outline: 2px solid #396196;
}

Geben Sie benutzerdefinierten Steuerelementen, zum Beispiel eigenen Dropdown-Menüs oder Schiebereglern, einen expliziten Fokusstil – sie haben standardmäßig keinen.

Wie deutlich ein Indikator sein sollte, erfahren Sie unter Deutlicher Fokus, dem strengeren Gegenstück zu dieser Prüfung.

Wie Silktide das testet

Simuliert eine Tastaturnutzung, die durch alle fokussierbaren Elemente auf der Seite tabbt, und überspringt Elemente, die Sie von der Prüfung ausgeschlossen haben, Elemente, die für sehende Personen verborgen sind, sowie Elemente mit einem tabindex von -1.
Vergleicht die Stile jedes Elements in seinem fokussierten und nicht fokussierten Zustand.
Meldet Elemente, deren Erscheinungsbild sich in keiner Weise ändert, die eine sehende Person unterscheiden könnte, wenn sie erhalten.

Fehlerbehebung

Der Fokusstil benötigt JavaScript, um sichtbar zu werden

Fokusstile sollten ausschließlich in CSS definiert sein. Wenn der Fokus durch angewendet wird – zum Beispiel durch ein Skript, das eine Klasse hinzufügt –, erkennt Silktide ihn möglicherweise nicht, und er funktioniert eventuell nicht mit unterstützenden Technologien ohne physische Tastatur. Deaktivieren Sie JavaScript und tabben Sie durch die Seite, um dies zu bestätigen.

Fokusstile, die wir nicht messen können

Einige Arten, den Fokus zu implementieren, können nicht automatisch erkannt werden:

Fokus, der mit Pseudoelementen wie ::before oder ::after gezeichnet wird.
Fokus, der über :focus-within auf einem Container angewendet wird.
Fokusstile, die auf Kindelemente vererbt werden, zum Beispiel ein <span> innerhalb eines Links. Einige dieser Fälle werden erkannt, aber nicht alle Varianten.

Elemente, die diese Techniken verwenden, werden übersprungen, statt gemeldet zu werden.

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 erscheint, ist es tatsächlich per Tastatur erreichbar und benötigt einen Fokusstil. Siehe tabindex auf MDN.