Stellen Sie sich vor, Ihre :focus-Styles würden animiert von einem Element zum nächsten springen, während Sie mit der Tab-Taste durch eine Seite navigieren. Wie der Fokusring, der über die Seite zum nächsten Element fliegt. Der Geist dahinter ähnelt dem von Smooth Scrolling: Es ist leichter zu verstehen, was passiert, wenn Bewegung die Veränderung begleitet¹. Anstatt dass das Scrollen (oder die Fokusänderung) ein sofortiger Sprung ist, führt die Bewegung Sie zum neuen Ort.
Guido Bouman dachte, das wäre gut für die Barrierefreiheit und sah sich einige Optionen an (z.B. Flying Focus), hat aber schließlich eigenen entwickelt, Floating Focus.
Nach dieser Erkundung hatten wir eine gute Vorstellung davon, was ein guter Fokus-Zustand braucht. Er muss einen hohen Kontrast haben, aber die Lesbarkeit der zugrunde liegenden Komponenten nicht beeinträchtigen. Er muss den Benutzer mit einer Art Übergang zum nächsten Fokusziel führen. Und er muss nur für Benutzer angezeigt werden, die vom Fokus-Outline profitieren.
Wir haben 2019 schon einmal etwas Ähnliches behandelt, als Maurice Mahan FocusOverlay entwickelte.
Hier ist, was ich damals darüber geschrieben habe:
- Es ist ein schöner Effekt.
- Ich kann mir vorstellen, dass es ein Gewinn für die Barrierefreiheit ist, denn während die Seite scrollt, um sicherzustellen, dass das nächste fokussierte Element sichtbar ist, hilft sie sonst nicht, zu sehen, wohin der Fokus gegangen ist. Eine Bewegung, die die Aufmerksamkeit auf das nächste fokussierte Element lenkt, kann es klarer machen.
- Ich kann mir vorstellen, dass es sich negativ auf die Barrierefreiheit auswirkt, da es sich um Bewegung handelt, die normalerweise nicht vorhanden ist und überraschend und möglicherweise abschreckend sein könnte.
- Wenn es "einfach funktioniert" bei allen meinen fokussierbaren Elementen, ist das cool, aber ich sehe, dass es Datenattribute zur Steuerung des Verhaltens gibt. Wenn ich feststelle, dass ich das Verhalten in meinen Vorlagen streuen muss, um diese spezielle Bibliothek unterzubringen, wäre ich wahrscheinlich weniger begeistert.
In diesem Artikel habe ich eine bedingte Ladeidee behandelt, um dies nicht zu laden, wenn prefers-reduced-motion auf reduce gesetzt ist. Heutzutage könnte man einen bedingten ES-Modul-Import durchführen.
Nehmen Sie nichts davon als Rat, dass diese bewegungsbasierte Fokus-Sache zu 100% gut für die Barrierefreiheit ist. Ich fühle mich nicht qualifiziert, diese Feststellung zu treffen. Aber es ist interessant.
- Das erinnert mich auch an "transitional interfaces". Bewegung kann wirklich helfen, klar zu machen, was in einer Benutzeroberfläche passiert.
Ich denke, es gibt definitiv kognitive Barrierefreiheitsvorteile für Tastaturnutzer, aber Sie haben Recht, wenn Sie überlegen, ob es ein Hindernis für Menschen mit Bewegungsempfindlichkeit oder für andere sein wird. Ich frage mich auch, ob der Effekt bei manchen Benutzeroberflächen oder Inhalten nützlicher ist als bei anderen?
Hallo Chris,
Danke für die Vorstellung! Artikelautor hier. Floating Focus entfernt tatsächlich seinen "sanften" Übergang, wenn ein Benutzer
prefers-reduced-motionaufreducegesetzt hat. (Neu hinzugefügt) Was dann übrig bleibt, ist ein richtig anpassbarer Fokusring. Wenn JavaScript vollständig deaktiviert ist, wird auf den ursprünglichen (wenn auch suboptimalen) Fokusring zurückgegriffen.focus-behavior: smooth
Ich möchte Barrierefreiheit in- und auswendig lernen… Sowohl Frontend als auch Backend..!!