“prefers-reduced-motion” für Animationen anwenden

Im Web dienen Animationen oft dazu, Nutzer*innen visuelles Feedback zu geben – etwa zu zeigen, dass gerade Daten geladen oder Aktionen ausgeführt werden. Bewegte Elemente können außerdem helfen, die Wahrnehmung zu steuern. Ein typisches Beispiel ist eine Ladeanimation, die eingeblendet wird, während im Hintergrund Inhalte nachgeladen werden. Sie kann die gefühlte Wartezeit deutlich verkürzen.

Darüber hinaus gibt es rein dekorative Effekte wie animierte Farbverläufe, Parallax-Scrolling, Zoom-Animationen oder Hintergrundvideos. Richtig eingesetzt tragen solche Animationen zu einer besseren Nutzererfahrung bei, weil sie einer statischen Seite mehr Dynamik verleihen und sie interaktiver wirken lassen.

Animationen deaktivieren

Viele Betriebssysteme bieten in ihren Barrierefreiheits-Einstellungen eine Funktion an, mit der Nutzer*innen festlegen können, dass sie weniger Animationen wünschen. Über die Media-Query “prefers-reduced-motion” lässt sich diese Einstellung im Web auslesen, sodass Umfang und Art der Animationen entsprechend reduziert oder entfernt werden können.

@media not (prefers-reduced-motion) { }

Am einfachsten ist es, eure CSS Animation in dieses Media Query zu setzen, somit wird es nur ausgeführt, wenn “Reduced Motion” NICHT aktiviert ist.

z. B. hier eine simple “hover up” Animation

@media not (prefers-reduced-motion) {
  %root% {
    position: relative;
    transition: translate .3s ease-in-out; 
  }
  %root%:hover {
    translate: 0 -.25em;
  }
}