Animierte Position des Fokusrings

Maurice Mahan hat FocusOverlay erstellt, eine „Bibliothek zum Erstellen von Overlays auf fokussierten Elementen.“ Diese Beschreibung ist etwas verwirrend, da man keine Bibliothek benötigt, um Fokusstile zu erstellen. Was die Bibliothek tatsächlich tut, ist, die Fokusringe zu *animieren*, wenn der Fokus von einem Element zu einem anderen wechselt. Sie basiert auf der gleichen Idee wie Flying Focus.

Ich bin nicht stark genug in meinem Wissen über Barrierefreiheit, um eine definitive Antwort darauf zu geben, ob das eine gute Idee ist oder nicht, aber mein Gedanke ist folgender:

Es ist ein netter Effekt.
Ich kann mir vorstellen, dass es ein Gewinn für die Barrierefreiheit ist, da die Seite zwar scrollt, um sicherzustellen, dass das nächste fokussierte Element sichtbar ist, aber ansonsten nicht hilft, zu sehen, wohin der Fokus gegangen ist. Eine Bewegung, die die Aufmerksamkeit auf das nächste fokussierte Element lenkt, könnte es deutlicher machen.
Ich kann mir vorstellen, dass es sich nachteilig auf die Barrierefreiheit auswirkt, da es sich um eine *Bewegung* handelt, die normalerweise nicht vorhanden ist und überraschend und möglicherweise abstoßend sein könnte.
Wenn es „einfach funktioniert“ bei all meinen fokussierbaren Elementen, ist das cool, aber ich sehe, dass es Datenattribute zur Steuerung des Verhaltens gibt. Wenn ich feststelle, dass ich Verhaltenssteuerungen über meine Vorlagen streuen muss, um diese spezielle Bibliothek zu unterstützen, wäre ich wahrscheinlich weniger begeistert.

Zu diesem letzten Punkt könnte man es bedingt laden, abhängig von den Bewegungseinstellungen eines Benutzers.

Die Bibliothek ist auf npm verfügbar, aber dank UNPKG auch als direkte Verknüpfung erhältlich. Betrachten wir die Verwendung der URLs zu den Ressourcen direkt, um das Konzept des bedingten Ladens zu veranschaulichen

<link 
  rel="stylesheet" 
  href="//unpkg.com/focus-overlay@latest/dist/focusoverlay.css" 
  media="prefers-reduced-motion: no-preference"
/>

<script>
const mq = window.matchMedia("(prefers-reduced-motion: no-preference)");

if (mq.matches) {
  let script = document.createElement("script");
  script.src = "//unpkg.com/focus-overlay@latest/dist/focusoverlay.js";
  document.head.appendChild(script);
}
</script>

Die JavaScript-Datei ist außerdem 11,5 KB / 4,2 KB komprimiert und die CSS-Datei ist 453 B / 290 B komprimiert, daher muss man dies immer in die Überlegungen zur Leistung einbeziehen, da Leistung und Barrierefreiheit verwandte Konzepte sind.

Leistung ist nicht nur die Skriptgröße. Wenn man sich den Code ansieht, sieht es so aus, als ob der Fokusring durch das Anhängen eines `<div>` an den `<body>` erstellt wird, der einen sehr hohen `z-index`-Wert hat, um gesehen zu werden, und `pointer-events: none`, um nicht zu stören. Dann wird er absolut positioniert mit `top`- und `left`-Werten und mit `width` und `height` skaliert. Es sieht so aus, als ob neue Positionsinformationen berechnet und dann auf dieses div angewendet werden, und CSS kümmert sich um die Bewegung. Nach meinem letzten Kenntnisstand sind das keine besonders performanten CSS-Eigenschaften zum Animieren, daher würde ich denken, dass ein zukünftiges Feature hier die Verwendung von Animations-FLIP wäre, um nur Transformationen zu animieren.

Ben

# 28. Oktober 2019

Definitiv etwas, das wir vor 10 Jahren als jQuery-Plugin hätten gehabt!
Und etwas, das früher ein Barrierefreiheits-Plug-in gewesen wäre.
Heute wirkt es ziemlich invasiv, und wenn ich sehe, wie zögerlich UI-Designer gegenüber einem einfachen „Fokus“-Zustand für Links oder Schaltflächen sind, fürchte ich, dass sie zu gefährlichen Wesen würden, wenn ihnen das präsentiert würde ;-)
Immer noch ein interessantes barrierefreies Feature, das zum Standard werden könnte (in einem von den benötigenden Personen installierten Werkzeug).

Guy Hickling

# 5. November 2019

Hmmm. Wir müssen definitiv gut sichtbare Fokusindikatoren für die Barrierefreiheit fördern – um Menschen mit schlechter Sehkraft zu helfen. Aber dies muss mit Menschen getestet werden, die anfällig für Bewegungsprobleme und vestibuläre Störungen sind, um zu sehen, wie sie damit zurechtkommen, bevor es weitergeht. Es scheint auch etwas ablenkend zu sein (für mich ist es das auf jeden Fall). Ich kann mir vorstellen, dass viele Leute denken, das sei cool, wenn sie es zum ersten Mal sehen. Bis sie erkennen, dass sie es beobachten müssen, solange sie auf dieser Website bleiben. Ich glaube, zu diesem Zeitpunkt könnten Websites unnötigerweise eine Reihe von Besuchern verlieren.

Kommentare