Der Fokusindikator (oft als „Fokusring“ dargestellt) gibt das aktuell fokussierte Element auf Ihrer Seite an. Für Nutzer, die keine Maus verwenden können, ist dieser Indikator sehr wichtig, da er als Ersatz für den Mauszeiger dient.
Wenn der Standardfokusindikator des Browsers mit Ihrem Design kollidiert, können Sie ihn mit CSS neu gestalten. Denken Sie aber daran, dass auch Nutzer mit Tastatur auf Ihre Website zugreifen.
Mit :focus wird immer ein Fokusindikator angezeigt.
Die Pseudoklasse :focus wird immer angewendet, wenn ein Element den Fokus erhält, unabhängig vom Eingabegerät (Maus, Tastatur, Stift usw.) oder der Methode, die zum Fokussieren verwendet wird. Das <div> unten hat beispielsweise ein tabindex, wodurch es fokussierbar ist. Außerdem hat 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 dorthin wechseln, sieht die <div> immer gleich aus.
Leider kann es bei Browsern Unterschiede geben, wie sie den Fokus anwenden. Ob ein Element den Fokus erhält, kann vom Browser und vom Betriebssystem abhängen.
Das <button> unten hat beispielsweise auch ein benutzerdefiniertes Format für den Status :focus.
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. Wenn Sie in Safari unter macOS auf das <button> klicken, wird der benutzerdefinierte Fokusstil jedoch nicht angezeigt. Das liegt daran, dass das Element in Safari keinen Fokus erhält, wenn Sie darauf klicken.
Da das Verhalten des Fokus inkonsistent 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 selektiv eine Fokusanzeige einblenden.
Die neue Pseudoklasse :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 der Tastendruck keine Meta-, ALT-/OPTION- oder CONTROL-Taste umfasste, wird :focus-visible abgeglichen.
Bei der Schaltfläche im Beispiel unten wird selektiv ein Fokusindikator angezeigt. Wenn Sie mit der Maus darauf klicken, sind die Ergebnisse anders als wenn Sie zuerst mit der Tastatur darauf tabben.
button:focus-visible {
outline: 4px dashed orange;
}
Mit :focus-within das übergeordnete Element eines fokussierten Elements gestalten
Die Pseudoklasse :focus-within wird auf ein Element angewendet, wenn das Element selbst oder ein anderes Element innerhalb dieses Elements den Fokus erhält.
Damit kann ein Bereich der Seite hervorgehoben werden, um die Aufmerksamkeit des Nutzers auf diesen Bereich zu lenken. Das Formular unten erhält beispielsweise den Fokus, wenn das Formular selbst oder eines seiner Optionsfelder ausgewählt wird.
form:focus-within {
background: #ffecb3;
}
Wann sollte eine Fokusanzeige eingeblendet werden?
Eine gute Faustregel ist, sich zu fragen: „Wenn ich auf diese Schaltfläche klicke, während ich ein Mobilgerät verwende, erwarte ich dann, dass eine Tastatur angezeigt wird?“
Wenn die Antwort „Ja“ lautet, sollte das Steuerelement wahrscheinlich immer einen Fokusindikator anzeigen, unabhängig vom Eingabegerät, mit dem es fokussiert 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 senden. Daher ist es hilfreich, immer einen Fokusindikator anzuzeigen.
Wenn die Antwort „Nein“ lautet, kann in der Kontrollgruppe selektiv ein Fokusindikator angezeigt werden. Ein gutes Beispiel ist das Element <button>. Wenn ein Nutzer mit einer Maus oder einem Touchscreen darauf klickt, ist die Aktion abgeschlossen und ein Fokusindikator ist möglicherweise nicht erforderlich. Wenn der Nutzer jedoch mit einer 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 werden soll, ist ehrlich gesagt sehr verwirrend. Wenn Sie das Erscheinungsbild eines <button>-Elements mit CSS ändern oder einem Element ein tabindex geben, wird das Standardverhalten des Fokusrings des Browsers ausgelöst.
Ein sehr häufiges Antimuster ist das Entfernen des Fokusindikators mithilfe von CSS, z. B. so:
/* Don't do this!!! */
:focus {
outline: none;
}
Eine bessere Möglichkeit, dieses Problem zu umgehen, ist die Verwendung einer Kombination aus :focus und dem :focus-visible-Polyfill. Der erste Codeblock unten zeigt, wie das Polyfill funktioniert. Die Beispiel-App darunter enthält ein Beispiel für die Verwendung des Polyfills zum Ändern des Fokusindikators auf einer Schaltfläche.
/*
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 {
…
}