Stilfokus

Rob Dodson

Die Fokusanzeige (oft mit einem Fokusring gekennzeichnet) weist auf den aktuellen fokussierten Element auf Ihrer Seite. Für Nutzer, die keine Maus verwenden können, ist sehr wichtig, da er als Stellvertreter für die den Mauszeiger.

Wenn die standardmäßige Fokusanzeige des Browsers nicht mit Ihrem Design übereinstimmt, können Sie um sie umzugestalten. Denk dabei aber immer an die Nutzer, die deine Tastatur verwenden.

:focus verwenden, damit immer eine Fokusanzeige eingeblendet wird

Die :focus Die Pseudoklasse wird immer dann angewendet, wenn ein Element fokussiert wird, unabhängig von der Eingabe Gerät (Maus, Tastatur, Eingabestift usw.) oder die Methode zum Fokussieren. Beispiel: Das <div> unten hat ein tabindex, wodurch es fokussierbar ist. Es hat auch eine benutzerdefinierten Stil für seinen :focus-Status:

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

Unabhängig davon, ob Sie mit der Maus darauf klicken oder mit der Tastatur, <div> sieht immer gleich aus.

Leider stimmt die Anwendung des Fokus in Browsern manchmal nicht überein. Ob oder nicht auf ein Element fokussiert wird, kann vom Browser und vom System.

Beispielsweise hat das Element <button> unten auch einen benutzerdefinierten Stil für sein :focus Bundesstaat.

button:focus {
  outline: 4px dashed orange;
}

Wenn Sie in Chrome unter macOS mit der Maus auf <button> klicken, sollte nun Folgendes angezeigt werden: mit dem benutzerdefinierten Fokusstil. Der benutzerdefinierte Fokusstil wird jedoch nicht angezeigt, wenn Sie klicken Sie unter macOS in Safari auf das <button>. Das liegt daran, In Safari wird das Element nicht hervorgehoben, wenn Sie darauf klicken.

Da das Fokusverhalten uneinheitlich ist, sind möglicherweise einige Tests erforderlich. auf verschiedenen Geräten, um sicherzustellen, dass Ihr Fokusstile für Ihre Nutzenden akzeptabel ist.

Mit :focus-visible eine Fokusanzeige selektiv einblenden

Das neue :focus-visible Die Pseudoklasse wird immer dann angewendet, wenn ein Element den Fokus erhält erkennt Browser über die Heuristik, dass die Darstellung eines Fokusindikators die für die Nutzenden von Vorteil sind. Wenn die letzte Nutzerinteraktion über die Tastatur erfolgte und der Tastendruck kein Meta-Zeichen ALT / OPTION enthielt. oder CONTROL-Schlüssel verwenden, dann stimmt :focus-visible überein.

Die Schaltfläche im Beispiel unten zeigt selektiv eine Fokusanzeige an. Wenn klicken Sie mit der Maus darauf, sehen die Ergebnisse anders aus als bei der ersten um mit der Tabulatortaste zu wechseln.

button:focus-visible {
  outline: 4px dashed orange;
}

Mit :focus-within können Sie das übergeordnete Element eines fokussierten Elements gestalten.

Die :focus-within "pseudo-class" wird auf ein Element angewendet, wenn das Element selbst oder ein anderes Element innerhalb dieses Elements in den Fokus rückt.

Sie können damit einen Bereich der Seite hervorheben, die Aufmerksamkeit der Nutzenden auf diesen Bereich. Das folgende Formular ist beispielsweise sowohl im Fokus wenn das Formular selbst ausgewählt ist und wenn eines der Optionsfelder ausgewählt.

form:focus-within {
  background: #ffecb3;
}

Wann eine Fokusanzeige angezeigt werden sollte

Als Faustregel gilt: „Wenn Sie auf dieses Steuerelement geklickt haben, wird auf einem Mobilgerät eine Tastatur angezeigt?“

Wenn die Antwort „Ja“ lautet, sollte das Steuerelement wahrscheinlich immer einen Fokus unabhängig vom Eingabegerät, mit dem der Fokus festgelegt wurde. Ein gutes Beispiel ist Das <input type="text">-Element. Der Nutzer muss eine Eingabe an die -Element über die Tastatur verwenden, unabhängig davon, wie das Eingabeelement ursprünglich empfangen wurde. Daher ist es hilfreich, immer eine Fokusanzeige einzublenden.

Wenn die Antwort „Nein“ lautet, kann das Steuerelement selektiv einen Fokus . Ein gutes Beispiel ist das Element <button>. Klickt ein Nutzer darauf mit eine Maus oder einen Touchscreen verwenden, ist die Aktion abgeschlossen und die Fokusanzeige notwendig sein. Wenn der Nutzer jedoch mit einer Tastatur navigiert, ist das nützlich, um eine Fokusanzeige einzublenden, damit die Nutzenden entscheiden können, klicken Sie mit der Taste ENTER oder SPACE auf das Steuerelement.

Auf outline: none verzichten

Browser entscheiden, wann eine Fokusanzeige erstellt wird, verwirrend sein. Das Aussehen eines <button>-Elements mit CSS ändern oder Ein Element vom Typ „tabindex“ führt dazu, dass das standardmäßige Fokusringverhalten des Browsers und zum Kick-in.

Ein sehr häufiges Anti-Muster besteht darin, den Fokusindikator mithilfe von CSS zu entfernen. Beispiele:

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

Eine bessere Lösung zur Umgehung dieses Problems ist eine Kombination aus :focus und :focus-visible-Polyfill. Der erste Codeblock unten zeigt, funktioniert der Polyfill und die darunterliegende Beispiel-App ein Beispiel für die Verwendung von der Polyfill, um die 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 {
  …
}