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 äußerst wichtig, da er als Ersatz für den Mauszeiger dient.
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.
Mit :focus eine Fokusanzeige immer anzeigen
Der Pseudo-Klassenname :focus wird immer angewendet, wenn ein Element den Fokus erhält, unabhängig vom Eingabegerät (Maus, Tastatur, Eingabestift usw.) oder der Methode, mit der der Fokus darauf gesetzt wird. Der <div> unten hat beispielsweise einen tabindex, wodurch er fokussierbar ist. Außerdem gibt es einen benutzerdefinierten Stil 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 zum Tabulatorzeichen wechseln, sieht das <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 das Element in Safari 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 können Sie die Fokusanzeige selektiv einblenden
Der neue Pseudo-Klassenname :focus-visible wird immer dann angewendet, wenn ein Element den Fokus erhält und der Browser anhand von Heuristiken feststellt, dass die Anzeige 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
Die Pseudoklasse :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 eingeblendet werden soll
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 das Steuerelement mit den Tasten ENTER oder SPACE anklicken möchte.
Auf outline: none verzichten
Die Art und Weise, wie Browser entscheiden, wann eine Fokusanzeige gezeichnet 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 die polyfill funktioniert. Die Beispiel-App darunter zeigt, wie Sie mit der polyfill die Fokusanzeige auf einer Schaltfläche ä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 {
…
}