Designing for Reduced Motion
Treat UI animations as an enhancement some users must disable for comfort. The `prefers-reduced-motion` media query lets you respect system-level accessibility settings, preventing vestibular triggers.
Treat UI animations as a progressive enhancement, not a default. Some users experience physical discomfort from UI motion, and the `prefers-reduced-motion` CSS media query detects their OS-level setting, allowing you to provide a safer experience. This applies to any non-essential motion, from parallax scrolling to scaling modals. The footgun is simply disabling animations, which can break context. Instead, replace jarring motion (like zooms) with gentler alternatives like cross-fades.
Read the original → developer.mozilla.org
- #accessibility
- #css
- #ui-design
- #animation
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.