Gestalte deutlich sichtbaren Tastaturfokus mit :focus-visible

Erstellt am 22.01.2022

Schickes Design oder Barrierefreiheit? Mit der CSS-Pseudoklasse :focus-visible könnt ihr sowohl Tastaturnutzer:innen unterstützen als auch ästhetisch anspruchsvolle Kund:innen zufriedenstellen.

Nahaufnahme von Händen einer Person, die auf einer Laptop-Tastatur schreibt Foto: © cottonbro / pexels.com

Die Bedeutung des Tastaturfokus

Ein zentrales Merkmal von barrierefreien Websites ist die Möglichkeit, sie alleine mit der Tastatur zu bedienen. Davon profitieren etwa Nutzer:innen mit motorischen Einschränkungen, die keine Maus verwenden können. Damit sie sinnvoll durch den Inhalt navigieren können, muss das aktuell fokussierte Element einen deutlich erkennbaren, visuellen Fokus-Indikator erhalten.

Browser definieren einen Standard-Fokusrahmen, um die Sichtbarkeit des Tastaturfokus zu gewährleisten. Das Aussehen des Fokus-Indikators kann mithilfe der CSS-Pseudoklasse :focus geändert werden. Zum Beispiel:

button:focus {
    outline: 2px solid purple;
}

Design versus Barrierefreiheit

Nun wird der Fokus-Indikator nicht nur bei der Navigation mit der Tastatur eingeblendet, sondern auch dann, wenn Nutzer:innen ein fokussierbares Element mit der Maus anklicken oder am Handy mit dem Finger berühren. Für manche Nutzer:innen ist diese visuelle Änderung unerwartet und irritierend. Ihnen ist nicht bewusst, dass der Fokus-Indikator zur Barrierefreiheit beiträgt.

Oft sind Web-Entwickler:innen daher mit Kund:innen oder Grafik-Designer:innen konfrontiert, welche die Entfernung des Fokus-Indikators aus ästhetischen Gründen fordern. Zahlreiche Websites enthalten daher CSS-Regeln wie diese:

button:focus {
    outline: none;
}

Bitte tut das nicht! Ihr würdet damit Nutzer:innen, die auf die Tastaturbedienung angewiesen sind, von der Nutzung eurer Website ausschließen.

Die Lösung heißt :focus-visible

Es gibt eine Möglichkeit, Design und Barrierefreiheit zu versöhnen: Die Pseudoklasse :focus-visible. Die Spezifikation dazu lautet:

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the user agent determines via heuristics that the focus should be made evident on the element.

Das bedeutet: Der Fokus-Indikator wird nur eingeblendet, wenn er gebraucht wird. Also wenn ein Element fokussiert wird und der Browser den visuellen Indikator für notwendig erachtet (z.B. bei Navigation mit der Tastatur).

/* Fokus-Indikator verbergen, wenn dieser nicht benötigt wird. */
button:focus:not(:focus-visible) {
    outline: none;
}

/* Fokus-Indikator bei Navigation mit Tastatur einblenden. */
button:focus-visible {
    outline: 2px solid purple;
}

Auf diese Weise könnt ihr das Fokus-Verhalten etwa für Schaltflächen und Links präzise steuern. Manche Elemente wie Eingabefelder erhalten jedoch weiterhin bei einem Mausklick den Fokus-Indikator, da das Anklicken die Eingabe per Tastatur aktiviert und somit eine Tastaturbedienung gegeben ist. Mit meiner Demo könnt ihr selbst das Verhalten testen.

Browser-Unterstützung

Das Feature wird bereits von den meisten modernen Browsern unterstützt. Auch Safari unterstützt :focus-visible seit der Version 15.4. Wer auf Nummer sicher gehen will, kann einen regulären Fokus-Indikator definieren und diesen für Browser, die :focus-visible unterstützen, überschreiben.

/* Regulärer Fokus-Indikator für ältere Browser */
button:focus {
    outline: 2px solid purple;
}

/* Für Browser, die :focus-visible unterstützen */
@supports (:focus-visible) {
    button:focus:not(:focus-visible) {
        outline: none;
    }

    button:focus-visible {
        outline: 2px solid purple;
    }
}

Nützliche Links

Update am 14.04.2022

Artikel wurde hinsichtlich Safari 15.4 aktualisiert.