Keine Bewegung ist nicht immer bevorzugt-reduzierte-Bewegung

Es gibt ein Code-Snippet, das ich ständig sehe, wenn über die Media-Query prefers-reduced-motion gesprochen wird. Hier ist es

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Dies ist CSS, das versucht, jegliche Bewegung auf einer Website zu eliminieren, unter der Bedingung, dass der Benutzer in den Barrierefreiheits-Einstellungen seines Betriebssystems eine Präferenz für reduzierte Bewegung angegeben hat.

Warum prefers-reduced-motion wichtig ist

Der Grund für diese Einstellung ist, dass Bewegungen auf dem Bildschirm ein Problem der Barrierefreiheit darstellen. Hier ist Eric Bailey

Vestibularstörungen können dazu führen, dass Ihr vestibuläres System Schwierigkeiten hat, Sinn zu machen, was zu Gleichgewichtsverlust und Schwindel, Migräne, Übelkeit und Hörverlust führt. Jeder, der sich zu schnell gedreht hat, ist mit einem verwirrten vestibulären System vertraut.

Vestibularstörungen können sowohl genetische als auch umweltbedingte Faktoren haben. Sie sind Teil des größeren Spektrums von Erkrankungen, die Bedenken hinsichtlich der Barrierefreiheit ausmachen, und betreffen mehr als 70 Millionen Menschen.

Hier ist er erneut in einem Folgeartikel

Wenn Sie eine vestibuläre Störung haben oder bestimmte Arten von Migräne oder Krampfanfällen auslösen, kann das Navigieren im Web einer Minenfeldbestzung ähneln — Sie sind ständig nur einen Klick davon entfernt, eine nicht angekündigte Animation zu aktivieren. Und das nur beim gelegentlichen Surfen.

Reduzierte Bewegung vs. vernichtete Bewegung

Wenn man dies weiß, mag die Versuchung groß sein, bei der Bewegung auf "Nuklear" zu gehen und sie vollständig zu eliminieren, wenn ein Benutzer eine Präferenz für reduzierte Bewegung angegeben hat. Das Problem dabei ist – um Eric noch einmal zu zitieren – „Animation ist nicht unnötig.“ Manche mögen es sein, aber Animation kann auch die Barrierefreiheit *unterstützen*. Zum Beispiel kann eine „übergangsbegleitende Benutzeroberfläche“ (z. B. eine Liste, die das Öffnen eines neuen Elements animiert, damit es hineingeschoben wird) sehr hilfreich sein.

Animation kann ein großartiges Werkzeug sein, um einige Formen kognitiver Behinderungen zu bekämpfen, indem sie verwendet wird, um komplizierte Konzepte zu zerlegen oder die Beziehung zwischen scheinbar unterschiedlichen Objekten zu kommunizieren. Val Heads Artikel auf A List Apart beleuchtet einige weitere sehr gut recherchierte Vorteile, darunter die Verbesserung der Problemlösungsfähigkeit, des Gedächtnisses und des Lernerfolgs sowie die Reduzierung der kognitiven Belastung und Ihrer Anfälligkeit für Change Blindness.

In diesem Fall würden Sie die hilfreiche kontextbezogene Bewegung verlieren, wenn Sie alles einfach vernichten. Sie möchten vielleicht einfach einen anderen Ansatz wählen, wenn Sie sich in einem prefers-reduced-motion-Szenario befinden. Vielleicht weniger, langsamere oder entfernte *Bewegung*, während Sie sich stärker auf Farbe und Fading-Übergänge verlassen.

Ban Nadel schrieb kürzlich „Applying Multiple Animation @keyframes To Support Prefers-Reduced-Motion In CSS“ und behandelte ein ähnliches Beispiel. Eine Modal-Eingangsanimation verwendet standardmäßig sowohl einen Fade-in- als auch einen Scale-in-Effekt. In einem prefers-reduced-motion-Szenario verwendet sie dann den Fade-in, aber nicht das Skalieren. Das Skalieren verursacht Bewegung, während das Fading dies nicht tut.

/* 
  By default, we'll use the REDUCED MOTION version of the animation.
*/
@keyframes modal-enter {
  from {
    opacity: 0 ;
  }
  to {
    opacity: 1 ;
  }
}

/*
  Then, if the user has NO PREFERENCE for motion, we can OVERRIDE the
  animation definition to include both the motion and non-motion properties.
*/
@media ( prefers-reduced-motion: no-preference ) {
  @keyframes modal-enter {
    from {
      opacity: 0 ;
      transform: scale(0.7) ;
    }
    to {
      opacity: 1 ;
      transform: scale(1.0) ;
    }
  }
}

Sehen Sie sich die GIF-Demo auf Bens Website an, wenn Sie einen schnellen Vergleich wünschen.

Ich mag, wie dieser Stil des Ansatzes lautet: *Denken Sie über das Problem nach und finden Sie eine Lösung für reduzierte Bewegung*, anstatt *scheiß drauf, keine Bewegung, Punkt!!*

Aber nicht alle Bewegungen werden von CSS gesteuert

Während wir beim Thema dieses „Screw-All-Motion“-CSS-Schnipsels sind, beachten Sie, dass es nur dann wirksam ist, wenn auf Websites, auf denen alle Bewegungen *vollständig von CSS gesteuert* werden. Wenn Sie JavaScript-gesteuerte Animationen verwenden, seien Sie gewarnt, dass dieser nukleare Schnipsel... nun ja, hier ist Josh Comeau

Wenn Ihre Animationen vollständig von CSS gesteuert werden, funktioniert das großartig… Aber ich hatte seltsame Probleme, wenn Animationen in JS laufen. Insbesondere habe ich gesehen, dass dieses Zurücksetzen die entgegengesetzte Wirkung hatte und Animationen *super schnell und schwindelerregend* machte.

Das stimmt: Es könnte buchstäblich das Gegenteil von dem bewirken, was Sie zu tun versuchen.