Der Fokusindikator (oft durch einen „Fokusring“ gekennzeichnet) gibt an, welches Element auf Ihrer Seite gerade im Fokus ist. Für Nutzer, die keine Maus verwenden können, ist dieser Indikator sehr wichtig, da er als Stand-in für ihren Mauszeiger fungiert.
Wenn der Standard-Fokusindikator des Browsers mit Ihrem Design kollidiert, können Sie ihn mit CSS neu gestalten. Denken Sie nur daran, auch Tastaturnutzer zu berücksichtigen.
:focus verwenden, damit immer eine Fokusanzeige eingeblendet wird
Die Pseudoklasse :focus wird immer angewendet, wenn ein Element fokussiert wird, unabhängig vom Eingabegerät (Maus, Tastatur, Eingabestift usw.) oder von der Methode, mit der es hervorgehoben wird. Der <div> unten hat beispielsweise einen tabindex, wodurch er fokussierbar ist. Außerdem hat es ein benutzerdefiniertes Design für den Status :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Unabhängig davon, ob Sie mit der Maus darauf klicken oder mit der Tastatur zur Tabulatortaste wechseln, sieht <div> immer gleich aus.
Leider ist die Fokuszuweisung in Browsern nicht immer einheitlich. Ob ein Element den Fokus erhält, hängt vom Browser und vom Betriebssystem ab.
Das <button> unten hat beispielsweise auch einen benutzerdefinierten Stil für den :focus-Status.
button:focus {
outline: 4px dashed orange;
}
Wenn Sie in Chrome unter macOS mit der Maus auf das <button> klicken, sollte der benutzerdefinierte Fokusstil angezeigt werden. Der benutzerdefinierte Fokusstil wird jedoch nicht angezeigt, wenn Sie in Safari unter macOS auf das <button> klicken. Das liegt daran, dass in Safari das Element nicht den Fokus erhält, wenn Sie darauf klicken.
Da das Verhalten des Fokus nicht einheitlich ist, sind möglicherweise einige Tests auf verschiedenen Geräten erforderlich, um sicherzustellen, dass Ihre Fokusstile für Ihre Nutzer akzeptabel sind.
Mit :focus-visible eine Fokusanzeige selektiv einblenden
Die neue Pseudoklasse :focus-visible wird immer dann angewendet, wenn ein Element den Fokus erhält und der Browser über eine Heuristik feststellt, dass die Darstellung eines Fokusindikators für den Nutzer von Vorteil wäre. Insbesondere wenn die letzte Nutzerinteraktion über die Tastatur erfolgte und die Tastenaktivierung keine Meta-, ALT-, OPTION- oder CONTROL-Taste enthielt, wird :focus-visible als Übereinstimmung ermittelt.
Die Schaltfläche im Beispiel unten zeigt selektiv einen Fokusindikator an. Wenn Sie mit der Maus darauf klicken, sind die Ergebnisse anders als wenn Sie zuerst mit der Tastatur darauf wechseln.
button:focus-visible {
outline: 4px dashed orange;
}
Mit :focus-within das übergeordnete Element eines fokussierten Elements stylen
Der Pseudo-Klassenname :focus-within wird auf ein Element angewendet, wenn entweder das Element selbst oder ein anderes Element innerhalb dieses Elements den Fokus erhält.
Damit können Sie einen Bereich der Seite hervorheben, um die Aufmerksamkeit der Nutzer auf diesen Bereich zu lenken. Im folgenden Beispiel erhält das Formular beispielsweise den Fokus, wenn es selbst ausgewählt wird, aber auch, wenn eines der Optionsfelder ausgewählt wird.
form:focus-within {
background: #ffecb3;
}
Wann eine Fokusanzeige angezeigt werden sollte
Als Faustregel gilt: Wenn Sie auf ein Steuerelement auf einem Mobilgerät klicken, würden Sie erwarten, dass eine Tastatur angezeigt wird?
Wenn die Antwort „Ja“ lautet, sollte für das Steuerelement immer ein Fokusindikator angezeigt werden, unabhängig davon, mit welchem Eingabegerät der Fokus darauf gesetzt wird. Ein gutes Beispiel ist das <input type="text">-Element. Der Nutzer muss unabhängig davon, wie das Eingabeelement ursprünglich den Fokus erhalten hat, Eingaben über die Tastatur an das Element senden. Daher ist es hilfreich, immer eine Fokusanzeige zu verwenden.
Wenn die Antwort „Nein“ lautet, wird möglicherweise ein Fokusindikator für das Steuerelement angezeigt. Ein gutes Beispiel ist das Element <button>. Wenn ein Nutzer darauf mit der Maus oder dem Touchscreen klickt, ist die Aktion abgeschlossen und eine Fokusanzeige ist möglicherweise nicht erforderlich. Wenn der Nutzer jedoch mit der Tastatur navigiert, ist es hilfreich, einen Fokusindikator anzuzeigen, damit er entscheiden kann, ob er mit den Tasten ENTER oder SPACE auf das Steuerelement klicken möchte.
Auf outline: none verzichten
Die Art und Weise, wie Browser entscheiden, wann eine Fokusanzeige erstellt wird, ist ehrlich gesagt sehr verwirrend. Wenn Sie das Erscheinungsbild eines <button>-Elements mit CSS ändern oder einem Element ein tabindex zuweisen, wird das Standardverhalten des Fokusrings des Browsers aktiviert.
Ein sehr häufiges Antimuster ist das Entfernen des Fokusindikators mit CSS, z. B.:
/* Don't do this!!! */
:focus {
outline: none;
}
Eine bessere Lösung für dieses Problem ist die Kombination von :focus und der :focus-visible-Polyfill. Der erste Codeblock unten zeigt, wie der Polyfill funktioniert. Die darunterliegende Beispiel-App enthält ein Beispiel für die Verwendung des Polyfills, um den Fokusanzeige für eine Schaltfläche zu ändern.
/*
This will hide the focus indicator if the element receives focus via the
mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
…
}