prefers-reduced-motion (CSS-Media-Query)
prefers-reduced-motion ist eine CSS-Media-Query, mit der Websites die Betriebssystem-Einstellung „reduzierte Bewegung“ auslesen und Animationen automatisch reduzieren oder deaktivieren können. Sie hilft vor allem Menschen mit vestibulären Störungen, bei denen Parallax-Effekte, Auto-Play-Videos oder große Scroll-Animationen Schwindel, Übelkeit oder Kopfschmerzen auslösen können.
In der Praxis
Technisch aktiviert man die Abfrage per `@media (prefers-reduced-motion: reduce) { ... }` und ersetzt darin aufwendige Animationen durch sanfte Übergänge oder entfernt sie ganz. Die Abfrage adressiert das Grundanliegen von WCAG-Kriterium 2.2.2 „Pause, Stop, Hide“ (Stufe A) sowie 2.3.3 „Animation from Interactions“ (Stufe AAA), auch wenn Letzteres formal selten verpflichtend gefordert wird. macOS, Windows, iOS und Android bieten die Systemeinstellung seit mehreren Jahren an, moderne Browser unterstützen die Media Query flächendeckend.