Bewegungsreduzierung: prefers-reduced-motion und WCAG 2.3.3

Für die meisten Nutzer sind sanfte Animationen ein angenehmes Gestaltungselement. Für Menschen mit vestibulären Störungen, Migräne oder bestimmten neurologischen Erkrankungen können Parallax-Effekte, großflächige Bewegungen und Auto-Play-Videos jedoch Übelkeit, Schwindel oder Anfälle auslösen. Die Media-Query `prefers-reduced-motion` gibt Nutzern die Kontrolle zurück: Sie signalisiert, dass das Betriebssystem auf reduzierte Bewegung eingestellt ist. Webseiten können und sollten darauf reagieren, indem sie Animationen minimieren oder durch statische Alternativen ersetzen. Seit WCAG 2.1 und verstärkt mit WCAG 2.2 ist Bewegungsreduzierung ein zentrales Barrierefreiheitsthema.

Medizinischer Hintergrund und betroffene Nutzergruppen

Vestibuläre Störungen betreffen das Gleichgewichtssystem im Innenohr und können durch visuelle Bewegungsreize verschlimmert werden. Schätzungen zufolge leiden bis zu 35 Prozent der Erwachsenen über 40 an irgendeiner Form vestibulärer Dysfunktion. Betroffene erleben bei Parallax-Scrolling, Zoom-Animationen oder bewegten Hintergründen Symptome wie Schwindel, Übelkeit und Desorientierung – ein Phänomen, das als „Cybersickness" oder „VIMS" (Visually Induced Motion Sickness) bekannt ist. Auch Menschen mit Migräne können durch Bildschirmbewegungen Attacken bekommen. Epileptische Anfälle können durch blinkende oder schnell wechselnde Inhalte ausgelöst werden – WCAG 2.3.1 adressiert dies direkt. Darüber hinaus profitieren Menschen mit Aufmerksamkeitsstörungen (ADHS) von reduzierten Animationen, da bewegte Elemente ablenken und die Konzentration auf den eigentlichen Inhalt erschweren. Die Zielgruppe für Bewegungsreduzierung ist also deutlich größer, als man zunächst annehmen könnte – es geht nicht um eine Nische, sondern um einen relevanten Anteil der Bevölkerung.

prefers-reduced-motion in CSS und JavaScript

Die Media-Query `prefers-reduced-motion` kennt zwei Werte: `no-preference` (Standard, Animationen erwünscht) und `reduce` (Nutzer wünscht reduzierte Bewegung). Der empfohlene Ansatz ist „Motion First, dann Reduzierung": Definieren Sie Animationen normal und deaktivieren Sie sie innerhalb einer `@media (prefers-reduced-motion: reduce)`-Regel. Ein robusteres Pattern ist jedoch der umgekehrte Weg: Definieren Sie keine Animationen als Standard und aktivieren Sie sie nur bei `@media (prefers-reduced-motion: no-preference)` – so sind Nutzer ohne Media-Query-Unterstützung automatisch geschützt. In CSS: `@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }`. Setzen Sie die Duration nicht auf 0, sondern auf 0.01ms – damit werden `animationend`-Events noch gefeuert und JavaScript-Logik bricht nicht. In JavaScript können Sie die Präferenz mit `window.matchMedia("(prefers-reduced-motion: reduce)")` abfragen und auf Änderungen mit `.addEventListener("change", callback)` reagieren.

Parallax, Auto-Play und problematische Patterns

Parallax-Scrolling ist einer der häufigsten Auslöser für Cybersickness – verschiedene Ebenen bewegen sich unterschiedlich schnell, was das Gehirn als Widerspruch zwischen visueller Wahrnehmung und Gleichgewichtssinn interpretiert. Bei `prefers-reduced-motion: reduce` sollten Sie Parallax komplett deaktivieren und statische Bilder zeigen. Auto-Play-Videos sollten entweder gestoppt oder durch ein Standbild mit Play-Button ersetzt werden – WCAG 2.2.2 fordert ohnehin einen Pause-Mechanismus für bewegte Inhalte, die länger als 5 Sekunden laufen. Scroll-gesteuerte Animationen (Scroll-Triggered Animations) wie Elemente, die beim Scrollen einfliegen, rotieren oder skalieren, sollten bei reduzierter Bewegung sofort in ihrer Endposition angezeigt werden. CSS `scroll-behavior: smooth` sollte auf `auto` zurückgesetzt werden. Hover-Animationen sollten auf einfache Opacity-Wechsel oder Farbänderungen reduziert werden statt Verschiebungen oder Skalierungen. Auch Lottie-Animationen und animierte SVGs müssen respektiert werden – implementieren Sie eine Prüfung der Media-Query, bevor Sie die Animation starten.

Implementierung in der Praxis

Beginnen Sie mit einem Animations-Audit: Erfassen Sie alle Animationen auf Ihrer Website und kategorisieren Sie sie. Funktionale Animationen wie ein Spinner bei Ladezeiten oder ein Fortschrittsbalken sind meist unproblematisch und können beibehalten werden – sie sind kurz und dienen der Orientierung. Dekorative Animationen wie Parallax, schwebende Elemente oder animierte Illustrationen sollten bei `reduce` vollständig deaktiviert werden. Übergangsanimationen wie Seitenübergänge oder Menü-Einblendungen können auf einfache Opacity-Fades reduziert werden – ein schneller Fade ist weniger problematisch als eine Schiebebewegung. Implementieren Sie zusätzlich zur systemweiten Media-Query einen manuellen Toggle auf Ihrer Website: Nicht alle Nutzer wissen, wo sie die Systemeinstellung finden, und manche möchten Bewegung nur auf bestimmten Websites reduzieren. Speichern Sie die Präferenz im localStorage. Dokumentieren Sie in Ihrem Design-System, welche Animationen reduziert werden und wie das Fallback aussieht, damit neue Entwickler konsistent arbeiten.

Testing und Barrierefreiheits-Konformität

Testen Sie `prefers-reduced-motion` in Chrome DevTools: Öffnen Sie die Rendering-Tools (Cmd/Ctrl+Shift+P, „Show Rendering") und setzen Sie „Emulate CSS media feature prefers-reduced-motion" auf „reduce". Navigieren Sie nun durch Ihre gesamte Website und prüfen Sie: Sind alle dekorativen Animationen deaktiviert? Funktionieren funktionale Animationen noch? Bricht das Layout ohne Animationen? Werden animierte Übergänge durch sinnvolle Alternativen ersetzt? Prüfen Sie auch JavaScript-gesteuerte Animationen – CSS-Media-Queries allein erfassen diese nicht. Testen Sie mit echten Geräten: Aktivieren Sie „Bewegung reduzieren" auf iOS (Einstellungen → Bedienungshilfen → Bewegung) oder „Animationen entfernen" auf Android. Automatisierte Tests können mit Puppeteer oder Playwright die Media-Query emulieren und Screenshots vergleichen. WCAG-Konformität erfordert auf Level AA mindestens einen Pause-Mechanismus für alle bewegten Inhalte (2.2.2) und den Verzicht auf dreimaliges Blitzen pro Sekunde (2.3.1). Level AAA verlangt zusätzlich die Deaktivierbarkeit aller nicht-essentiellen Animationen (2.3.3).