How should you adapt animations for prefers-reduced-motion?

WHAT THIS TESTS: This question probes whether you treat accessibility as a systems design problem rather than a checklist item. The interviewer wants to see that you understand vestibular motion disorders, know the specific CSS media feature, and can reason about which motion is decorative versus functional. Seniors should demonstrate they have built or audited design systems for reduced motion, not just read a blog post about it.

A GOOD ANSWER COVERS: First, name the feature explicitly: the prefers-reduced-motion CSS media feature. Second, explain that the correct pattern is usually to scope animations inside @media (prefers-reduced-motion: no-preference) so motion is opt-in rather than opt-out. Third, describe replacement strategies: swap scaling, parallax, or large panning animations with opacity fades, color shifts, or instant state changes. Fourth, preserve essential functional motion by making it instant rather than removing it entirely, for example a loading spinner should snap to its final state or be replaced by a static indicator so the user still knows the system is working. Fifth, mention testing on real operating system settings because the browser inherits the value from the OS and dev-tools emulation alone is insufficient for confidence.

COMMON WRONG ANSWERS: A major red flag is saying you would ignore the preference because animations are decorative. Another is suggesting JavaScript sniffing or a user toggle instead of the native media feature, which breaks the contract between the OS and the browser. Candidates also stumble by proposing to disable all transitions including functional ones, leaving users without loading feedback or state change cues. Treating reduced motion as a performance optimization rather than an accessibility requirement signals a fundamental misunderstanding.

LIKELY FOLLOW-UPS: The interviewer may ask how you would handle a complex WebGL or canvas animation that cannot be controlled by CSS media queries. They might also ask how a design token system should expose motion so product engineers do not accidentally ship vestibular triggers, or how you would write an ESLint or stylelint rule to enforce reduced-motion guards. Another variant is asking what you do when marketing insists on a hero video with motion.

ONE CONCRETE EXAMPLE: Suppose a modal dialog enters with a scale and translate transition. In the default experience it scales from 0.95 to 1 and fades in over 200 milliseconds. Under @media (prefers-reduced-motion: reduce) you remove the transform and change the duration to 0 milliseconds so the dialog appears instantly, but you keep the backdrop opacity transition if it does not trigger vestibular issues, or replace it with an instant darkening. The trigger button still opens the modal, focus still moves, and the user gets identical functional outcomes without the motion.

Source: developer.mozilla.org