Der Fokusindikator wird häufig durch einen „Fokusring“ dargestellt, der das aktuell hervorgehobene Element auf der Seite angibt. 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 die Standardfokusanzeige des Browsers mit Ihrem Design in Konflikt steht, können Sie sie mit CSS umgestalten. Denken Sie dabei immer an die Nutzenden der Tastatur!
:focus verwenden, damit immer eine Fokusanzeige eingeblendet wird
Die Pseudoklasse :focus wird immer dann angewendet, wenn ein Element fokussiert wird, unabhängig von dem Eingabegerät (Maus, Tastatur, Eingabestift usw.) oder der Methode, mit der es fokussiert wurde. Das <div> unten hat beispielsweise ein tabindex, das es fokussierbar macht. Für den Status :focus gibt es auch einen benutzerdefinierten Stil:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Unabhängig davon, ob Sie mit der Maus darauf klicken oder über die Tastatur darauf klicken, sieht das <div> immer gleich aus.
Leider ist die Konzentration von Browsern uneinheitlich. Ob ein Element fokussiert wird, kann vom Browser und Betriebssystem abhängen.
Das unten aufgeführte <button> hat beispielsweise auch einen benutzerdefinierten Stil für seinen :focus-Status.
button:focus {
outline: 4px dashed orange;
}
Wenn Sie in Chrome unter macOS mit einer Maus auf <button> klicken, sollten Sie den benutzerdefinierten Fokusstil sehen. Der benutzerdefinierte Fokusstil wird jedoch nicht angezeigt, wenn Sie unter macOS in Safari auf <button> klicken. Das liegt daran, dass das Element in Safari nicht hervorgehoben wird, wenn Sie darauf klicken.
Da das Verhalten des Fokus inkonsistent ist, müssen möglicherweise einige Tests auf verschiedenen Geräten durchgeführt werden, um sicherzustellen, dass Ihre Fokusstile für Ihre Nutzer akzeptabel sind.
:focus-visible verwenden, um Fokusanzeige selektiv einzublenden
Die neue Pseudoklasse :focus-visible wird jedes Mal angewendet, wenn ein Element Fokus erhält und der Browser über Heuristiken bestimmt, dass die Anzeige eines Fokusindikators für den Nutzer von Vorteil wäre. Wenn die letzte Nutzerinteraktion beispielsweise über die Tastatur erfolgte und die Taste keine Meta-, ALT / OPTION- oder CONTROL-Taste enthielt, stimmt :focus-visible überein.
Über die Schaltfläche im Beispiel unten wird selektiv eine Fokusanzeige eingeblendet. Wenn Sie mit einer Maus darauf klicken, sind die Ergebnisse anders, als wenn Sie zuerst eine Tastatur verwenden, um dorthin zu gelangen.
button:focus-visible {
outline: 4px dashed orange;
}
Mit :focus-within das übergeordnete Element eines fokussierten Elements gestalten
Die Pseudoklasse :focus-within wird entweder auf ein Element angewendet, wenn das Element selbst den Fokus erhält oder wenn ein anderes Element innerhalb dieses Elements den Fokus erhält.
Damit lässt sich ein Bereich der Seite hervorheben, um die Aufmerksamkeit der Nutzer auf diesen Bereich zu lenken. Beispielsweise erhält das Formular unten den Fokus sowohl, wenn das Formular selbst ausgewählt ist, als auch, wenn eines seiner Optionsfelder ausgewählt ist.
form:focus-within {
background: #ffecb3;
}
Wann eine Fokusanzeige eingeblendet werden soll
Eine gute Faustregel besteht darin, sich folgende Frage zu stellen: "Wenn Sie auf einem Mobilgerät auf dieses Steuerelement klicken, würden Sie erwarten, dass es eine Tastatur anzeigt?"
Wenn die Antwort „Ja“ lautet, sollte das Steuerelement wahrscheinlich immer einen Fokusindikator anzeigen, unabhängig davon, welches Eingabegerät zum Fokussieren verwendet wird. Ein gutes Beispiel ist das Element <input type="text">. Der Nutzer muss unabhängig davon, wie das Eingabeelement den Fokus ursprünglich erhalten hat, über die Tastatur eine Eingabe an das Element senden. Daher ist es hilfreich, immer einen Fokusindikator einzublenden.
Wenn die Antwort „Nein“ lautet, kann das Steuerelement selektiv einen Fokusindikator anzeigen. Ein gutes Beispiel ist das Element <button>. Wenn ein Nutzer mit der Maus oder einem Touchscreen darauf klickt, ist die Aktion abgeschlossen und es ist möglicherweise keine Fokusanzeige erforderlich. Wenn der Nutzer jedoch mit einer Tastatur navigiert, ist es sinnvoll, eine Fokusanzeige einzublenden, damit der Nutzer 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 ein Fokusindikator gezeichnet wird, ist ehrlich gesagt sehr verwirrend. Wenn Sie die Darstellung eines <button>-Elements mit CSS ändern oder einem Element ein tabindex zuweisen, wird das standardmäßige Fokusring-Verhalten des Browsers aktiviert.
Ein sehr häufiges Anti-Muster besteht darin, den Fokusindikator mithilfe von CSS wie den folgenden zu entfernen:
/* Don't do this!!! */
:focus {
outline: none;
}
Eine bessere Lösung dieses Problems besteht darin, eine Kombination aus :focus und dem Polyfill :focus-visible zu verwenden. Der erste Codeblock unten zeigt, wie Polyfill funktioniert. Die Beispiel-App darunter enthält ein Beispiel für die Verwendung von Polyfill, um die Fokusanzeige einer 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 {
…
}