prefers-reduced-motion
Eine CSS-Media-Query, die erkennt, ob der Nutzer sein Betriebssystem gebeten hat, Bewegung/Animationen zu reduzieren. Sie erlaubt Websites, diese Einstellung zu respektieren, indem Animationen gedämpft oder abgeschaltet werden — wichtig für Menschen, denen davon übel wird oder die dadurch gestört werden.
Hintergrund: Große Animationen, Parallax-Effekte, Zoom-Effekte und schwungvolle Übergänge können bei Menschen mit vestibulären Störungen Übelkeit, Schwindel oder Migräne auslösen — und andere ablenken. Betriebssysteme haben eine „Bewegung reduzieren“-Einstellung, und @media (prefers-reduced-motion: reduce) lässt CSS darauf reagieren. Muster: Animationen wie gewohnt schreiben, aber in einem prefers-reduced-motion: reduce-Block dämpfen oder entfernen (z. B. eine große Bewegung durch eine einfache Überblendung ersetzen, oder animation: none). Gute Praxis: die Einstellung bei nicht essenziellen Animationen immer respektieren; nur Bewegung behalten, die tatsächlich Bedeutung vermittelt. Es ist eine WCAG-Anforderung an Barrierefreiheit. Ein gutes Beispiel dafür, die ausdrücklichen Präferenzen der Nutzer zu respektieren. Zusammen mit Focus Trap und ARIA Teil einer barrierefreien Web-Gestaltung. Hängt mit CSS Scroll Snap und Focus Trap zusammen.