a11y: Reduced Motion

Ein derzeit noch experimentelles Feature, das Anwendern von Firefox, Safari und bald auch Chrome ermöglicht, einer Website mitzuteilen, dass sie weniger Bewegung auf der Seite bevorzugen.

Seit kurzem haben wir im Newsticker von heise online ein kleines CSS-Snippet eingebunden, mit dem wir Rücksicht nehmen auf eine User-Einstellung für reduzierte Bewegung (beispielsweise wegen Motion Sickness). Diese Einstellung wird nicht im Browser vorgenommen, sondern lässt sich nur global im Betriebssystem konfigurieren. Unser Snippet sieht wie folgt aus:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01s !important;
    transition-duration: .01s !important;
  }
}

Gehen wir es einmal zeilenweise durch: Für das Media Query prefers-reduced-motion gibt es nur die Werte no-preference und reduce. Aktuell könnte man auch einfach nur nach prefers-reduced-motion abfragen, falls jedoch mal in Zukunft ein dritter Wert dazu kommt, ist die konkrete Abfrage nach reduce sicherer. Wir fahren hier den Ansatz, erst mal global die Bewegung runter zu drehen, um dies nicht überall separat machen zu müssen – daher auch der Holzhammer !important. Für die verhältnismäßig wenigen Stellen, an denen wir mit Animationen arbeiten, funktioniert das für uns ganz gut. Werden die Animationen umfangreicher oder ist beispielsweise eine SVG-Animation mit Loop im Spiel, müssten sicherlich speziellere Regeln für dieses Media Query geschrieben werden.

Nach dem Universalselektor für alle (Pseudo-)Elemente stellen wir scroll-behavior auf den Standardwert auto. Dieses Feature nutzen wir derzeit nur auf den Beitragsseiten, um beim Klick auf eine Zwischenüberschrift im Inhaltsverzeichnis nicht nur zu springen, sondern sichtbar dort hin zu scrollen.

Die nächsten beiden Zeilen stellen für animation und transition die Dauer der Animation auf eine sehr kurze Zeit von 0,01 Sekunden. Das ist tatsächlich ein Punkt, über den es sich zu sprechen lohnt, um ungewollte Probleme auf der Website zu vermeiden. Man mag sich fragen, weshalb hier nicht einfach animation: none oder transition-duration: 0s steht. In beiden Fällen wird kein transitionend-Event ausgelöst, was ja im Prinzip auch richtig ist, da die Animation komplett deaktiviert wäre. Blöd ist das allerdings, wenn ein JavaScript auf dieses Event wartet, um nach der Animation irgendeine Aktion abzuschließen oder auszulösen. Stellt man, wie im CSS-Snippet gezeigt, die Dauer jedoch nur auf eine sehr kurze Zeit, wird das JavaScript nicht beeinträchtigt und die Animation ist dennoch nicht wahrnehmbar.

Zum aktuellen Stand ist das Feature laut Can I Use verfügbar in Firefox seit der Version 63, in Safari seit Version 10.1 (iOS seit 10.3) und in Chrome ab Version 74. (hih)