Focus-Indikator

Ein Focus-Indikator ist die visuelle Markierung, die zeigt, welches Element gerade den Tastaturfokus besitzt, und ist essenziell für alle, die eine Website ohne Maus bedienen – vorgeschrieben durch WCAG-Kriterium 2.4.7 (Fokus sichtbar).

In der Praxis

outline: none sollte niemals ohne einen sichtbaren Ersatz gesetzt werden, sonst verschwindet der Fokus für Tastaturnutzer:innen komplett. Mit der Pseudoklasse :focus-visible lässt sich der Fokusring gezielt nur bei Tastaturbedienung anzeigen, ohne bei Maus-Klicks zu stören. Der Indikator sollte einen Kontrast von mindestens 3:1 zur Umgebung aufweisen und im gesamten Auftritt konsistent gestaltet sein, statt sich von Komponente zu Komponente zu unterscheiden.

Passende Leistung

Quellen

← Zurück zum Glossar