prefers-reduced-motion ist eine CSS-Media-Feature. Damit erkennt deine Website, ob jemand im Betriebssystem die Option „Bewegung reduzieren“ aktiviert hat. Ist das der Fall, solltest du Animationen, Parallax-Effekte und automatische Übergänge abschalten oder stark vereinfachen. Das hilft Menschen mit vestibulären Störungen, die durch Bewegung Schwindel, Übelkeit oder Migräne bekommen.
Bezug zu WCAG
Das passende Erfolgskriterium ist 2.3.3 Animation aus Interaktionen (Stufe AAA): Bewegung, die durch eine Interaktion ausgelöst wird, soll abschaltbar sein. Eng verwandt ist 2.2.2 Pausieren, Stoppen, Ausblenden (Stufe A) für automatisch startende Animationen. prefers-reduced-motion ist die saubere technische Umsetzung, um diese Anforderungen zu respektieren.
So setzt du es um
- Animationen in einer Media-Query kapseln:
@media (prefers-reduced-motion: reduce) { ... }. - Dort Übergänge auf nahezu null setzen oder ganz entfernen.
- Auch JavaScript-Animationen prüfen, etwa mit
matchMedia. - Automatisch abspielende Videos und Karussells respektieren die Einstellung.
Das Thema gehört zum POUR-Prinzip der Bedienbarkeit und zur kognitiven Barrierefreiheit. Es ist Teil moderner Barrierefreiheit und passt zum Gedanken des Universal Design.
In WordPress mit Bricks Builder oder GSAP-Animationen solltest du jede Bewegung in diese Media-Query einbetten. Mehr dazu im Ratgeber WordPress barrierefrei machen.