Schau dir das an! Der :focus-visible Pseudo-Selektor wird jetzt in Firefox unterstützt, ab Version 85, die gestern veröffentlicht wurde. Ich musste sofort zu den MDN Docs eilen, um das zu bestätigen, und ja, die :focus-visible Seite wurde aktualisiert, um die Nachricht widerzuspiegeln.
Was ist so cool an :focus-visible? Es geht um den blauen Fokus-Ring, der um Elemente angezeigt wird, die im Fokus sind. Es ist sozusagen ein glücklicher Mittelweg zwischen der Liebe zum Outline für Barrierefreiheitszwecke (man muss wissen, welches Element beim Tabben mit der Tastatur ausgewählt ist) und dem Nicht-wirklich-Lieben, wie es aussieht (alles muss dem Branding folgen).
Die Strategie war bisher größtenteils eine Alles-oder-Nichts-Entscheidung: Entweder verwendet man eine benutzerdefinierte outline, wenn sich ein beliebiges Element im :focus befindet (großartig, aber das bedeutet sowohl für Tastatur-Tabben als auch für Mausklicks) oder man verzichtet ganz auf die outline (nicht großartig, nie). :focus-visible erreicht dasselbe wie :focus, nutzt aber die Kenntnis des Browsers über Benutzereingaben (oder Heuristiken), um zu bestimmen, ob der Fokus von einer Tastatur oder einer Maus kommt.
(Sind die Heuristiken eines Browsers perfekt bei der Bestimmung der Eingabe? Das hängt davon ab. Die Dinge werden unklar, sobald wir Dinge wie Touch-Interaktionen einbeziehen.)
Das bedeutet, wir können den Standard-Fokus-Ring entfernen (yay!) für die richtigen Arten von Interaktionen (doppelt yay!) und dabei unsere eigenen benutzerdefinierten Stile anzeigen (dreifach yay!). Erlauben Sie mir, das feine Beispiel von Andy Adams direkt aus unserem Almanac zu entnehmen. Beachten Sie, dass :focus-visible den Fokusring nicht entfernen kann, wie es :focus kann, daher werden die beiden zusammen verwendet.
.next-image-button:focus {
outline: none;
}
.next-image-button:focus-visible {
outline: 3px solid blanchedalmond; /* That'll show 'em */
}Chrome implementierte :focus-visible bereits 2018. Firefox hatte vor dieser Implementierung seine eigene präfixierte Version, :-moz-focusring. Safari? Gehen Sie wählen Sie für das Feature!
Igalia sammelt Gelder und arbeitet daran, es in Safari zu integrieren! Hier ist Brian Kardell dazu.
Gibt es einen Vorteil, mit dem :not()-Selektor zu arbeiten, wie z. B.
a:focus { outline:1px dotted grey; outline-offset:1px; }
a:focus:not(:focus-visible) { outline: none; }
Könnte das für Browser, die :focus-visible nicht unterstützen, kompatibler sein als das Entfernen der Outline bei :focus?
So würde ich es auch machen. Außerdem, wenn Sie versuchen, die focus-visible-Deklaration mit etwas anderem zu kombinieren, wie z. B.
a:hover, a:focus-visible{, werden beide Deklarationen fehlschlagen, wenn der Browser focus-visible nicht unterstützt. Die Verwendung von regular focus und dann eine zweite Anweisung, um es in bestimmten Situationen zu entfernen, wie Sie es beschrieben haben, ist meiner Meinung nach sicherer.Liebe es!
Kurzfristig ja, es ist hilfreich, focus:not(:focus-visible) zu verwenden.
Aber im Rahmen dieses Updates ändern Browser auch die UA-Stylesheet, um :focus-visible für Standard-Fokusstile zu verwenden (das hat Firefox getan und ein Patch ist kürzlich in Chromium gelandet, um dasselbe zu tun).
Das bedeutet, dass Sie irgendwann einfach folgendes tun können:
.next-image-button:focus-visible {
outline: 3px solid blanchedalmond;
}
Sie müssten sich nicht einmal mit :focus beschäftigen
Als einer der Leute, die an diesem Vorschlag mit anderen gearbeitet haben, freue ich mich sehr, dass er Ihnen gefällt! Meine Firma Igalia arbeitet an allen Browser-Engines und wir arbeiten gerade daran in WebKit. Interessanter finde ich, dass diese Arbeit von Entwicklern als Teil einer Zusammenarbeit, die wir mit Open Collective namens Open Prioritization machen, ausgewählt wurde. In diesem Fall können Sie mehr als nur für das Problem abstimmen, Sie können helfen, unser Finanzierungsziel zu erreichen, um dies und weitere ähnliche Bemühungen über . zu unterstützen.
Wenn Sie mehr über die aktuelle Arbeit und Links zu weiteren Informationen über die größeren Bemühungen lesen möchten, können Sie dies auch in einem aktuellen Bericht des daran arbeitenden Entwicklers finden.
Aber warum die seltsame Benennung? "focus visible"
Oder übersehe ich etwas (nicht-muttersprachlicher Englischsprecher)?
Wenn Sie die Absicht der Barrierefreiheitsanforderung für den Fokusstatus anstelle ihrer technischen Anforderungen lesen, werden Sie feststellen, dass Sie für alle Benutzer einen klar definierten Fokusstatus haben sollten. Die Anforderung erwähnt Menschen mit kognitiven Behinderungen, die wahrscheinlich eine Maus und Tastatur benutzen und vergessen könnten, worauf sie gerade geklickt haben.
Ich denke, die Lösung, die wir wirklich brauchen, ist, mehr interessante Fokus-Status-Designs zur Auswahl zu haben.
Wenn der Fokus programmatisch mit JS gesteuert wird, wird focus visible unterstützt oder gelten normale focus outline styles, bis ein Benutzer Tab drückt, etc.?
Leider wird es nicht unterstützt. Zumindest für mich wäre es sinnvoll, dass focus-visible-Stile erscheinen, wenn element.focus() verwendet wird, aber es funktioniert nicht so.
Hey danke, ich hasse es. Jetzt haben unzählige Seiten diese hässlichen Ringe um zufällige Seitenelemente, die meinen Fokus ablenken. Ich bin froh, dass dies für diejenigen entwickelt wurde, die davon profitieren können, aber für jemanden, der (wie die meisten Leute) es nicht für Barrierefreiheit benötigt, beeinträchtigt es aktiv das Online-Erlebnis für mich.
Warum nicht einfach eine Option zum Abschalten für Leute, die es nicht brauchen? Warum es standardmäßig aktivieren, wenn es nur für eine Nische von Benutzern nützlich ist? Barrierefreiheitsfunktionen sollten unbedingt verfügbar gemacht werden, aber es gibt keinen Grund, warum sie den Browsern von denen aufgezwungen werden sollten, die sie nicht brauchen. Vielleicht eine Registerkarte "Barrierefreiheit" in den Einstellungen, in der die Leute diese Art von Dingen je nach ihren Bedürfnissen und Vorlieben einfach ein- und ausschalten können, oder eine Option, die bei der Installation festgelegt werden kann, aber fügen Sie es nicht einfach wahllos hinzu.