How would you implement reduced-motion support and why is it important?

How would you implement reduced-motion support and why is it important?

• A. Disable all CSS via a global flag.
• B. Ignore the user’s motion preferences.
• C. Use @media (prefers-reduced-motion: reduce) to disable or minimize animations.
• D. Set animation durations to the maximum possible.

Answer: (C)

Respecting motion preferences is essential. Use the CSS media feature prefers-reduced-motion to detect when a user has asked for less motion, and adapt animations accordingly. This matters because reduced motion helps people with vestibular disorders, migraines, or sensitivity to movement, making interfaces easier to use and reducing disorientation or discomfort. Implement by wrapping animation-driven styles in a media query: @media (prefers-reduced-motion: reduce) { … }. Inside, disable or minimize motion, for example by setting animation: none; transition: none; or by reducing durations to near zero. The goal is to keep the UI functional and accessible for everyone, while still delivering full motion for users who don’t need the restriction.

Respecting motion preferences is essential. Use the CSS media feature prefers-reduced-motion to detect when a user has asked for less motion, and adapt animations accordingly. This matters because reduced motion helps people with vestibular disorders, migraines, or sensitivity to movement, making interfaces easier to use and reducing disorientation or discomfort. Implement by wrapping animation-driven styles in a media query: @media (prefers-reduced-motion: reduce) { … }. Inside, disable or minimize motion, for example by setting animation: none; transition: none; or by reducing durations to near zero. The goal is to keep the UI functional and accessible for everyone, while still delivering full motion for users who don’t need the restriction.