Verwendung von prefers-reduced-motion für barrierefreie Animationen

Einige Nutzer empfinden bei animierten Benutzeroberflächen Schwindel, Übelkeit oder Desorientierung. Mit dem CSS-Media-Feature prefers-reduced-motion können Sie deren Systemeinstellung erkennen und mit zurückhaltenderer Bewegung reagieren – ohne Ihrer UI sämtlichen visuellen Feinschliff zu nehmen. Dieser Artikel behandelt die praktische Umsetzung in CSS und JavaScript für gängige Komponenten-Muster.

Was prefers-reduced-motion tatsächlich bewirkt

prefers-reduced-motion ist eine ausgereifte, weitverbreitete CSS-Media-Query – keine neue API. Sie liest eine Barrierefreiheitseinstellung auf Systemebene aus, die der Nutzer in seinem Betriebssystem (macOS, Windows, iOS, Android, Linux) aktiviert hat. Die beiden Werte sind:

• reduce – der Nutzer hat weniger Bewegung angefordert
• no-preference – es wurde keine Präferenz gesetzt

Erwähnenswert: @media (prefers-reduced-motion) ist eine Kurzschreibweise für @media (prefers-reduced-motion: reduce).

Der Eintrag in den MDN Web Docs deckt die vollständige Syntax und die Browser-Kompatibilitätstabelle ab, während Can I use die breite Browser-Unterstützung in modernen Engines bestätigt.

Das richtige mentale Modell: Reduzieren, nicht entfernen

Ein verbreiteter Fehler ist es, dies als Notausschalter für sämtliche Animationen zu behandeln. Das ist nicht das Ziel. Die Vorgaben – einschließlich WCAG 2.3.3 („Animation from Interactions”, Stufe AAA) – fordern, nicht-essenzielle Bewegungen zu reduzieren oder zu ersetzen, insbesondere:

• Großflächige Bewegungen (Parallax, Zooming, schiebende Panels)
• Sich drehende oder rotierende Elemente
• Scroll-getriggerte Animationen, die Inhalte durch den Viewport bewegen

Opazitäts-Übergänge, Farbwechsel und verkürzte Dauern sind generell sicherere Alternativen. Ein Modal, das eingeblendet wird, anstatt von unten hereinzufliegen, kommuniziert weiterhin eine Zustandsänderung, ohne vestibuläres Unbehagen auszulösen.

CSS-Implementierung: Zwei Ansätze

Defensiv (Opt-out): Standardmäßig animierte Stile definieren, dann innerhalb der Media-Query überschreiben.

.modal {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 300ms ease, opacity 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .modal {
    transform: none;
    transition: opacity 200ms ease;
  }
}

Progressiv (Opt-in): Standardmäßig statische Stile definieren und Bewegung nur hinzufügen, wenn der Nutzer kein Opt-out gewählt hat.

/* Static by default */
.modal {
  opacity: 0;
  transition: opacity 200ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .modal {
    transform: translateY(20px);
    transition: transform 300ms ease, opacity 300ms ease;
  }
}

Der progressive Ansatz ist sicherer für Nutzer, die keine Präferenz gesetzt haben, aber dennoch bewegungsempfindlich sein könnten.

CSS Custom Properties machen dies in einer großen Codebasis skalierbar:

:root {
  --duration: 300ms;
  --easing: ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0.01ms;
  }
}

.drawer {
  transition: transform var(--duration) var(--easing);
}

Die Präferenz in JavaScript erkennen

Für JS-gesteuerte Animationen verwenden Sie window.matchMedia:

const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');

if (prefersReduced.matches) {
  // skip or simplify animation
}

// React to live preference changes (e.g., user toggles OS setting)
prefersReduced.addEventListener('change', (e) => {
  if (e.matches) {
    // pause or replace animations
  }
});

Das ist nützlich für Karussells, scroll-getriggerte Effekte oder jede außerhalb von CSS gesteuerte Animation.

Animationsbibliotheken: Framer Motion und Motion.dev

Wenn Sie Motion for React verwenden (die Bibliothek, die viele noch Framer Motion nennen – ihre Dokumentation liegt mittlerweile auf Motion.dev), erledigt der useReducedMotion()-Hook das sauber:

import { motion } from "motion/react";
import { useReducedMotion } from "motion/react";

function Drawer({ isOpen }) {
  const reduce = useReducedMotion();

  return (
    <motion.div
      animate={{ x: isOpen ? 0 : -300, opacity: isOpen ? 1 : 0 }}
      transition={reduce ? { duration: 0 } : { duration: 0.3 }}
    />
  );
}

Der Hook liest die Systempräferenz reaktiv aus und bleibt damit synchron, falls der Nutzer seine OS-Einstellung mitten in einer Sitzung ändert.

Testen mit Chrome DevTools

Sie müssen Ihre Systemeinstellungen zum Testen nicht ändern. In den Chrome DevTools:

1. DevTools öffnen → Tab Rendering (über das Drei-Punkte-Menü → More tools → Rendering)
2. Den Eintrag “Emulate CSS media feature prefers-reduced-motion” suchen
3. Auf reduce setzen

Ihre Seite reagiert sofort, sodass Sie jede animierte Komponente überprüfen können, ohne Systemeinstellungen anzufassen.

Eine Anmerkung zur WCAG-Abdeckung

prefers-reduced-motion kann zur Erfüllung von WCAG 2.3.3 beitragen, deckt aber nicht alles ab. Automatisch abgespielte Videos, geloopte GIFs und sich kontinuierlich bewegende Inhalte können laut WCAG 2.2.2 („Pause, Stop, Hide”) weiterhin explizite Pause-/Stopp-Steuerelemente erfordern. Die Media-Query handhabt durch Interaktion ausgelöste Animationen gut – persistente Hintergrundbewegung benötigt eine separate Lösung.

Praktisches Fazit

Auditieren Sie Ihre animierten Komponenten – Modals, Drawer, Hover-Effekte, Karussells, Seitenübergänge – und entscheiden Sie für jede einzelne, ob Sie die Dauer reduzieren, Bewegung gegen Opazität tauschen oder die Animation ganz weglassen wollen. Nutzen Sie CSS Custom Properties, um die Logik zu zentralisieren, matchMedia, wenn JavaScript die Animation steuert, und die Chrome DevTools zur Überprüfung, ohne Ihr OS umzustellen.

Fazit

Das Beachten von prefers-reduced-motion ist einer der aufwandsärmsten und wirkungsvollsten Accessibility-Gewinne, die Frontend-Entwicklern zur Verfügung stehen. Die Technologie ist stabil, die Browser-Unterstützung exzellent, und die Implementierungsmuster sind über CSS, JavaScript und moderne Animationsbibliotheken hinweg geradlinig. Die eigentliche Arbeit besteht darin, das mentale Modell zu verschieben: Animation wird zu einer Schicht, die für empfindliche Nutzer heruntergeregelt wird, anstatt zu einem Feature, das man komplett abschaltet. Verankern Sie diese Gewohnheit in jeder Komponente, die Sie ausliefern.

FAQs

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..