When @media (prefers-reduced-motion: reduce) matches, which motion in an interface should actually be removed or substituted, and which motion is reasonable to keep?

## Why the preference exists at all The operating-system setting is not a taste control. For people with vestibular disorders, migraine sensitivity, or some forms of motion sickness, on-screen movement that suggests self-motion can trigger real physical symptoms — nausea, dizziness, headache — that outlast the page visit. That is why the trigger is specific: the problem is motion which implies the observer or a large part of the scene is moving, not the mere fact that pixels changed. This distinction is the whole answer to the question, because it tells you what to cut and what to keep. ## The categories to remove or substitute **Parallax.** Layers moving at different rates as you scroll is the canonical trigger; it is a direct simulation of depth and self-motion. **Scaling and zooming.** A modal that scales up from 0.8 to 1, a full-bleed image that slowly zooms, a hero that expands on scroll. Scaling a large surface reads as approach. **Long-distance translation.** A panel that slides the width of the screen, page transitions that push whole views sideways, carousels that animate across large distances. **Spinning, bouncing, and shaking.** Rotating loops on big elements, attention-seeking wobbles, shake-on-error. **Autoplaying, repeating motion.** Anything with `animation-iteration-count: infinite` on a visible element, autoplaying video or animated images used decoratively, ticker text. For each of these, the fix is rarely to delete and stop thinking. Ask what the animation was communicating and find a still way to say it. ```css .dialog { transition: transform 250ms ease, opacity 250ms ease; transform: translateY(24px); opacity: 0; } .dialog[data-open] { transform: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { .dialog { /* keep the crossfade, drop the movement */ transition: opacity 120ms ease; transform: none; } } ``` The substitution ladder, from best to bluntest, is: keep the feedback with `opacity` only; shorten the duration and cut the distance so the movement is a few pixels rather than a screen; apply the end state instantly. The third option is acceptable and often correct, but it should be a decision rather than the default. ## What is reasonable to keep Motion that is small, local, and carrying information usually stays. A loading spinner occupies a tiny area and does not imply scene motion; removing it can leave the interface looking frozen, which is a worse outcome. A determinate progress bar is the same case. Media the user explicitly started — a video they pressed play on — is content, not decoration. Very short micro-feedback, like a 100ms colour or opacity change on press, is not a vestibular trigger. Essential motion is a recognised carve-out: if the movement *is* the information, such as an animation demonstrating a physical technique, removing it destroys the content. The correct handling there is to make it user-controllable rather than to strip it. ## The accessibility criteria behind it Two WCAG 2.1 success criteria bear on this and are worth naming precisely because interviewers often ask which one applies. - **SC 2.3.3 Animation from Interactions (AAA).** Motion animation triggered by interaction can be disabled, unless the animation is essential. This is the criterion `prefers-reduced-motion` most directly serves. - **SC 2.2.2 Pause, Stop, Hide (Level A).** Content that moves, blinks or scrolls automatically for more than five seconds must be pausable, stoppable, or hideable. This one applies regardless of the user's motion preference, which is a useful thing to point out: an infinite marquee is a Level A problem for everyone, not just for people who set the switch. There is also **SC 2.3.1 Three Flashes or Below Threshold**, which is about seizure risk from flashing rather than vestibular motion — a different hazard that a crossfade substitution does not address, and worth not conflating. ## A working rule of thumb Ask two questions about every animation. First, does it move a large area, imply depth, or repeat indefinitely? If yes, it must change under `reduce`. Second, what was it telling the user? Whatever the answer is, say it another way — colour, opacity, position without transition, or text. That pair of questions produces better reduced-motion styles than any blanket rule, and it is exactly the reasoning an interviewer is listening for.