Stilfokus

Rob Dodson

Der Fokusindikator, oft ein „Fokusring“, gibt an, welches Element auf Ihrer Seite gerade im Fokus steht. Für Nutzer, die keine Maus verwenden können oder möchten, ist dieser Indikator sehr wichtig, da er als Ersatz für einen Mauszeiger dient.

Wenn der Standardfokusindikator des Browsers mit Ihrem Design kollidiert, können Sie ihn mit CSS neu gestalten. Denken Sie daran, die Nutzer im Blick zu behalten.

:focus verwenden, um immer eine Fokusanzeige zu sehen

Die Pseudoklasse :focus wird auf Elemente angewendet, die den Fokus haben, unabhängig von der verwendeten Eingabemethode oder dem verwendeten Gerät (z. B. Maus, Tastatur oder Stift).

Das folgende <div> hat beispielsweise ein tabindex, das es fokussierbar macht, mit einem benutzerdefinierten Stil für den :focus-Zustand:

div[tabindex="0"]:focus {
  outline: 4px dashed orange;
}

Unabhängig davon, welches Gerät Sie verwenden, sieht das <div> im Fokus gleich aus.

Leider kann es bei Browsern Unterschiede geben, wie der Fokus angewendet wird. Ob ein Element den Fokus erhält, kann vom Browser und vom Betriebssystem abhängen.

Das folgende <button> hat beispielsweise benutzerdefiniertes CSS 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 <button> klicken, wird das benutzerdefinierte Fokus-Design jedoch nicht angezeigt. Das liegt daran, dass das Element in Safari keinen Fokus erhält, wenn Sie darauf klicken.

Das Fokusverhalten ist inkonsistent. Testen Sie Ihre Seite auf verschiedenen Geräten und mit verschiedenen Eingaben, um sicherzustellen, dass die Fokusstile für Ihre Nutzer akzeptabel sind.

Mit :focus-visible können Sie eine Fokusanzeige selektiv einblenden.

Die Pseudoklasse :focus-visible wird angewendet, wenn ein Element den Fokus erhält und der Browser (mit Heuristiken) feststellt, dass die Anzeige eines Fokusindikators für den Nutzer von Vorteil wäre. Insbesondere wenn die letzte Nutzerinteraktion über eine Tastatur erfolgte und der Tastendruck keine Meta-, ALT-, OPTION- oder CONTROL-Taste umfasste, wird :focus-visible abgeglichen.

Die Schaltfläche im folgenden Beispiel zeigt selektiv einen Fokusindikator. Wenn Sie mit einer Maus klicken, sind die Ergebnisse anders als wenn Sie zuerst mit der Tastatur dorthin 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 untergeordnetes Element den Fokus erhält. Damit kann ein Bereich der Seite hervorgehoben werden, um die Aufmerksamkeit des Nutzers auf diesen Bereich zu lenken.

Ein Formular 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 Frage ist: „Wenn Sie auf dieses Steuerelement auf einem Mobilgerät klicken, würden Sie dann erwarten, dass eine Tastatur angezeigt wird?“

• Falls ja: Das Steuerelement sollte immer einen Fokusindikator anzeigen, unabhängig vom Eingabegerät. Das ist beispielsweise fast immer beim Element <input type="text"> der Fall. Der Nutzer muss Eingaben über die Tastatur an das Element senden, unabhängig davon, wie das Eingabeelement in den Fokus gerät.
• Nein: Das Steuerelement kann die Fokusanzeige selektiv einblenden. Wenn ein Nutzer beispielsweise mit einer Maus oder auf einem Touchscreen auf ein <button> klickt, wird die Aktion ausgeführt. Eine Fokusanzeige 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 ENTER oder LEERZEICHEN aktivieren 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.

Manchmal entfernen Entwickler den Fokusindikator mit CSS:

/* Don't do this!!! */
:focus {
  outline: none;
}

Eine bessere Möglichkeit, dieses Problem zu umgehen, besteht darin, :focus und das :focus-visible-Polyfill zu kombinieren. Der erste Codeblock 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 hides the focus indicator if the element receives focus with a
  mouse, but it still shows 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 {
  ...
}