prefers-reduced-motion ist eine CSS-Media-Query, mit der eine Website erkennt, ob Nutzer im Betriebssystem die Einstellung „Bewegung reduzieren“ (macOS/iOS), „Animationen in Windows anzeigen: aus“ oder „Animationen entfernen“ (Android) gewählt haben. Bewegte Effekte können bei vestibulären Störungen Schwindel, Übelkeit und Migräne auslösen und Menschen mit ADHS oder kognitiven Einschränkungen ablenken.
Umsetzung
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
- Parallax, Zoom- und Wischeffekte deaktivieren
- Automatische Karussells und Hintergrundvideos stoppen
- Sanftes Scrollen per JavaScript abschalten (
matchMedia('(prefers-reduced-motion: reduce)')) - Bedeutungstragende Zustandswechsel weiterhin sichtbar machen, etwa per Überblendung oder Farbe
Bezug zu WCAG
- 2.2.2 Pausieren, Beenden, Ausblenden (A): Bewegung über 5 Sekunden muss stoppbar sein.
- 2.3.3 Animation durch Interaktionen (AAA): durch Interaktion ausgelöste Animationen abschaltbar.
Häufige Fragen
Soll ich alle Übergänge entfernen?
Nicht zwingend. Kurze Farb- oder Deckkraftwechsel sind meist unproblematisch; kritisch sind Bewegungen im Raum, Zoom, Parallax und Dauerschleifen.
Reicht die Media Query für WCAG 2.2.2?
Nein. Für automatisch bewegte Inhalte braucht es zusätzlich ein sichtbares Bedienelement zum Pausieren.
Verwandte Begriffe: Karussell, Blinken, Kognitive Barrierefreiheit, User Agent