Keyboard-Only Focus Styles

Wie Eric Bailey sagt, wenn etwas interaktiv ist, braucht es einen Fokusstil. Vielleicht ist Ihre beste Wahl? Entfernen Sie nicht die verflixten Umrandungen, die fokussierbare Elemente standardmäßig haben. Wenn Sie zum Beispiel button { outline: 0; } verwenden, dann sollten Sie besser button:focus { /* etwas anderes, das visuell sehr deutlich ist */ } verwenden. Ich habe gerade heute eine Anfrage bearbeitet, bei der ein fehlender Fokusstil einem Benutzer geschadet hat, der sich auf visuelle Fokusstile für die Navigation im Web verlässt.

Aber diese Fokusstile sind am nützlichsten, wenn mit der Tastatur getabt oder auf andere Weise navigiert wird, und weniger, wenn sie durch einen Mausklick ausgelöst werden. Jetzt haben wir :focus-visible! Nelo schreibt

TLDR; :focus-visible ist die tastaturbetriebene Version von :focus.

Außerdem erwähnt der W3C-Vorschlag, dass :focus-visible gegenüber :focus bevorzugt werden sollte, außer bei Elementen, die eine Tastatureingabe erwarten (z. B. Textfelder, contenteditable).

(Siehe auch seinen Artikel für eine gute Demo, warum Mausklicks und Fokusstile im Widerspruch stehen können, jenseits einer allgemeinen Abneigung gegen unscharfe blaue Umrandungen.)

Die Browserunterstützung für :focus-visible ist ziemlich schlecht

Aber es gibt Firefox-Unterstützung, und wie Lea Verou sagt

… sobald Chrome seine Implementierung veröffentlicht, wird sie innerhalb von 1-2 Monaten explodieren.

So läuft das heutzutage im Allgemeinen. Sobald zwei große Browser Unterstützung haben – und einer davon ist Chrome – ist das ein ausreichend großer Teil des Webs, der ihn nutzen kann. Besonders wenn es so sicher wie diese Eigenschaft geschehen kann.

Sicher, denn es gibt ein offizielles Polyfill, was bedeutet, dass Sie Standard-Fokusstile löschen und einfach nur :focus-visible-Stile verwenden können

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline: lightgreen solid 2px;
}

Aber, wie Patrick H. Lauke dokumentiert hat, können Sie es auch ohne das Polyfill tun, indem Sie sorgfältig Selektoren verwenden und Stile nach Bedarf rückgängig machen

button:focus { /* Some exciting button focus styles */ }
button:focus:not(:focus-visible) {
  /* Undo all the above focused button styles
     if the button has focus but the browser wouldn't normally
     show default focus styles */
}
button:focus-visible { /* Some even *more* exciting button focus styles */ }

Scheint eine schöne Verbesserung für das Web zu sein.