prefers-reduced-motion
prefers-reduced-motion ist eine CSS-Media-Query, mit der Besucher mit Gleichgewichts-Sensitivität oder Migräne-Veranlagung dem Browser signalisieren können, dass sie weniger Animation wünschen. Websites respektieren diese Einstellung, indem sie aufwändige Bewegung durch flache Übergänge ersetzen.
prefers-reduced-motion ist eine zentrale Barrierefreiheits-Anforderung des modernen Web. Sie steht im Mittelpunkt des WCAG-Erfolgskriteriums 2.3.3 und ist für Websites mit Motion-Design eine ernstzunehmende Pflicht – auch ethisch, nicht nur rechtlich.
In einfachen Worten
Manche Menschen reagieren körperlich auf starke Bewegung in einer Benutzeroberfläche: Schwindel, Übelkeit, Migräne. Häufige Ursachen sind Störungen des Gleichgewichts-Systems (Vestibularstörungen), Migräne-Veranlagungen oder bestimmte Sensitivitäten aus dem Autismus-Spektrum. Moderne Betriebs-Systeme bieten daher eine systemweite Einstellung „Bewegung reduzieren", die der Browser über die CSS-Media-Query prefers-reduced-motion an die Website weitergibt – analog zur Farb-Schema-Erkennung über prefers-color-scheme. Wer diese Einstellung respektiert, deaktiviert aufwändige Animationen oder ersetzt sie durch flache, ruhige Übergänge – ohne dass dadurch wesentliche Inhalte verloren gehen.
Wozu brauche ich das?
Verbindlich für jede Website mit gestalterischem Motion-Design – gestaffelte Einblendungen, Parallax-Effekte, Hero-Animationen, magnetischer Schaltflächen-Effekt, scroll-getriggerte Einblendungen. Wer ohne Berücksichtigung der Media-Query arbeitet, verletzt das WCAG-Erfolgskriterium 2.3.3 (Animation from Interactions, Level AAA) und schafft eine Barriere für eine relevante Besucher-Gruppe. Standard-Umsetzung: Translations- und Skalierungs-Animationen werden auf einen Bruchteil ihrer ursprünglichen Dauer reduziert oder durch reine Sichtbarkeits-Übergänge ersetzt, Parallax-Effekte werden statisch, Auto-Play-Videos pausieren.
Beispiel aus der Praxis
Eine typische Premium-Website mit cineastischem Motion-Design: gestaffelte Einblendungen bei Karten-Eintritt, Parallax in der Hero-Sektion, Neige-Effekt auf Service-Bildern, sanfte Übergänge beim Scrollen. Für Besucher mit aktiver „Bewegung reduzieren"-Einstellung kann eine solche Seite faktisch unbenutzbar werden – Schwindel, Übelkeit, sofortiges Verlassen. Die Lösung ist ein einzelner Stil-Block, der innerhalb der Media-Query prefers-reduced-motion alle Translations- und Skalierungs-Animationen auf einen Bruchteil reduziert oder durch reine Sichtbarkeits-Übergänge ersetzt. Der Aufwand bleibt überschaubar; die Wirkung ist eine deutlich bessere Erreichbarkeit für die wenigen, aber sensiblen Besucher mit aktiver Reduced-Motion-Einstellung.
Wirtschaftlicher Nutzen
Die Umsetzung ist überschaubar: eine einzige Media-Query, die im Design-System einmalig hinterlegt wird und auf alle künftigen Animationen automatisch wirkt – ein direkter Beitrag zur Usability. Der Schutz ist doppelt: rechtlich (WCAG 2.3.3, relevant für BFSG-pflichtige B2C-Anwendungen) und ethisch – Menschen mit Vestibularstörungen sollen nicht erst Symptome aushalten müssen, bevor sie eine Website wieder verlassen. Wer eine Marken-Website mit hochwertigem Motion-Design baut, hat einen doppelten Anreiz: Die Animation transportiert Marken-Wirkung, der Respekt vor der Benutzer-Einstellung transportiert ebenfalls Marken-Wirkung.
Typische Fehler
- Animationen ohne jeden Reduced-Motion-Block umgesetzt – ein häufiger Standard-Verstoß auf Websites mit aufwändiger Bewegung.
- Reduced-Motion-Block nur für einen Teil der Animationen eingerichtet – Parallax-Effekte bleiben aktiv, obwohl sie zu den häufigsten Auslösern von Vestibular-Symptomen gehören.
- Auto-Play-Hintergrund-Videos werden nicht pausiert – bewegte Video-Schleifen sind in diesem Kontext besonders kritisch.
- Animation pauschal nur über transition: none deaktiviert – Anfangs- und Endzustand der Elemente müssen ebenfalls bewusst gesetzt sein, sonst springen sie ohne Übergang.
- Die Wirkung nicht im Betriebs-System getestet – ohne aktivierte „Bewegung reduzieren"-Einstellung lässt sich nicht beurteilen, ob die Umsetzung greift.
Worauf achten?
- Einen globalen Stil-Block am Anfang des Stylesheets einrichten, der innerhalb der Media-Query alle Animationen und Übergänge auf eine Mikro-Dauer setzt.
- Parallax-Effekte explizit deaktivieren – sie sind die häufigsten Auslöser für Vestibular-Symptome.
- Auto-Play-Hintergrund-Videos auf ein statisches Poster-Frame umstellen, sobald die Reduced-Motion-Einstellung aktiv ist.
- Bei JavaScript-Animationen (etwa über GSAP oder andere Motion-Bibliotheken) die Media-Query separat im Code prüfen – die System-Einstellung greift dort nicht automatisch über CSS.
- Die Wirkung im Betriebs-System aktiv testen („Bewegung reduzieren" in den Einstellungen aktivieren) und die Website durchklicken, statt nur den Stil-Block zu lesen.
Häufig gestellte Fragen
Was bewirkt prefers-reduced-motion?
Die CSS-Media-Query erkennt, wenn ein Besucher im Betriebs-System die Einstellung „Bewegung reduzieren" aktiviert hat. Websites können darauf reagieren und aufwändige Animationen für diese Besucher deaktivieren oder durch flache Übergänge ersetzen.
Wer profitiert von der Einstellung?
Menschen mit Störungen des Gleichgewichts-Systems (Vestibularstörungen), Migräne-Veranlagungen oder bestimmten Sensitivitäten aus dem Autismus-Spektrum. Für sie können aufwändige Bewegungen körperliche Symptome wie Schwindel oder Übelkeit auslösen.
Ist die Berücksichtigung Pflicht?
Das WCAG-Erfolgskriterium 2.3.3 verlangt eine Reaktion auf die Reduced-Motion-Einstellung auf Level AAA. Für BFSG-pflichtige B2C-Anwendungen ist Barrierefreiheit insgesamt verbindlich – die Berücksichtigung von prefers-reduced-motion ist dort eine der konkret prüfbaren Anforderungen.
Wie wird die Media-Query umgesetzt?
Über einen Stil-Block, der alle Animationen und Übergänge innerhalb der Media-Query auf eine Mikro-Dauer setzt oder durch reine Sichtbarkeits-Übergänge ersetzt. JavaScript-basierte Animationen müssen die Einstellung zusätzlich im Code prüfen, weil die System-Einstellung dort nicht automatisch über CSS greift.
Wie testet man die Umsetzung?
Im Betriebs-System die Einstellung „Bewegung reduzieren" aktivieren und die Website anschließend systematisch durchklicken. Es reicht nicht, nur den Stil-Block im Code zu lesen – Auto-Play-Videos, JavaScript-Animationen und Drittanbieter-Werkzeuge greifen oft separat.