Der :focus-visible Trick

Es lohnt sich immer zu wiederholen: Alle interaktiven Elemente sollten einen Fokusstil haben. So kann ein Tastaturnutzer erkennen, wenn er den Fokus auf dieses Element verschoben hat.

Aber wenn Sie :focus allein dafür verwenden, hat es einen Nebeneffekt, den viele Leute nicht mögen. Das bedeutet, dass, wenn Sie (mit der Maus) auf ein interaktives Element klicken, Sie den Fokusstil sehen. Vermutlich brauchen Sie diese Rückmeldung als Maussutzer nicht, da Sie Ihren Cursor gerade dorthin bewegt und geklickt haben. Was auch immer Sie davon halten, es hat über die Jahre so viele Leute verärgert, dass sie Fokusstile komplett entfernen, was ein übler Nettoverlust für die Barrierefreiheit im Web ist.

Was wäre, wenn wir Fokusstile nur dann anwenden könnten, wenn die Tastatur zum Fokussieren von etwas verwendet wird, nicht die Maus? Lea Verou hat dies vor ein paar Jahren angesprochen.

Ich werde ab sofort diese Regel pauschal zu allen meinen Stylesheets hinzufügen.

:focus:not(:focus-visible) { outline: none }

Entfernt die störende Umrandung für Maussutzer, behält sie aber für Tastaturnutzer bei und wird von Browsern, die :focus-visible nicht unterstützen, ignoriert.

— Lea Verou (@LeaVerou) 28. September 2018

Das war eine Reaktion darauf, dass Chrome die Funktion hinter einem Flag versteckt hat. Schlau, schlau.

Ein paar Jahre später veröffentlicht Chrome es ohne Flag. Sie sind von Leas Idee überzeugt.

Durch die Kombination von :focus-visible mit :focus können Sie noch einen Schritt weiter gehen und unterschiedliche Fokusstile anbieten, je nach Eingabegerät des Benutzers. Dies kann hilfreich sein, wenn Sie möchten, dass die Fokusanzeige von der Präzision des Eingabegeräts abhängt.

/* Focusing the button with a keyboard will show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}
  
/* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Ich würde vorschlagen, diese Selektoren ohne button auszuprobieren und sie global anzuwenden!

Es gibt noch mehr zu entdecken, daher verlinke ich hier noch einiges mehr.

• Der Chromium Blogbeitrag behandelt die Heuristiken des Selektors. Es ist knifflig. Es ist, als gäbe es einen Algorithmus, der bestimmt, ob :focus-visible übereinstimmen wird oder nicht, dem man weitgehend vertrauen muss. Er behandelt auch die Idee, dass Firefox schon lange :-moz-focusring hat, aber das Verhalten ist unterschiedlich genug, dass sie die Verwendung nicht empfehlen, wenn man konsistentes Verhalten anstrebt.
• Matthias Ott hat darüber mit einigen guten Informationen gebloggt, z. B. über die Verwendung des offiziellen Polyfills und wie man die Stile in DevTools richtig betrachtet (es gibt eine neue Checkbox dafür).
• Wir haben das schon einmal behandelt. Dabei haben wir Leas Tweet notiert, dass sie dachte, die Nutzung würde explodieren, wenn es wirklich veröffentlicht wird. Mal sehen (und hoffen)!
• Unser Almanacheintrag enthält viele Details.