The Cost of Ignoring Reduced-Motion Preferences

Buried in the settings of every modern operating system is a switch that says something like “reduce motion.” When a person flips it, their device passes the message along to every website they visit, through a CSS media query called prefers-reduced-motion. The site can check it with a few lines of code and tone down its animations accordingly. Most sites never check.

I find this remarkable when I frame it as what it literally is. A customer has walked into your store and said, out loud, please don’t wave things in my face. The infrastructure to hear them is built into every browser and costs nothing to use. And the near-universal response of the web is silence, not out of malice, but because nobody on the team knew the request was being made.

It’s worth understanding who flips that switch, because the phrase “reduce motion” undersells it. For people with vestibular disorders, conditions affecting the inner ear’s balance system, certain kinds of on-screen movement produce real physical symptoms: dizziness, nausea, disorientation that can last well after they close the tab. Parallax scrolling, where layers of the page slide at different speeds, is a notorious trigger, because it mimics the visual signature of self-motion while the body reports standing still, and that mismatch is roughly the recipe for motion sickness. Zooming transitions and large elements sweeping across the viewport do it too. This isn’t a preference in the sense that dark mode is a preference. For these users the switch is closer to medicine.

Then there’s a larger, quieter group: people with attention or sensory processing differences for whom ambient animation is a constant tax on focus, migraine sufferers, people who simply find the modern web exhausting and went looking for the dial that turns it down. Anyone who has flipped the switch has told you something specific: motion on screens costs me more than it costs you. They are the one group of users about whom you don’t have to guess.

Now look at what happens when a site ignores this. The visitor arrives, the hero animation swoops in, cards fade and rise as they scroll, a parallax band slides underneath the testimonials. For most visitors this is somewhere between pleasant and ignorable. For the visitor who asked for calm, the site is at best unpleasant to use and at worst physically sickening, and they leave. Nothing about this appears in your metrics except as a bounce. You will never receive the support ticket that says your scroll animation made me nauseous, because people who feel sick close the tab; they don’t write to you about it.

The fix is unusually clean, which is part of why the neglect bothers me. You don’t need to design a second website. In CSS, you wrap your animations so they apply only when the user hasn’t asked for reduced motion, or you add a block that, when the preference is set, shortens transitions to near-zero and stops the autoplay and the parallax. In JavaScript, you check the same media query before kicking off scroll-triggered effects. A blanket version of this, disable nonessential animation when the preference is present, is maybe an afternoon of work on a typical site, once, and it applies to every animation you ship afterward if you build it into your base styles. When my scanner at GazeSite examines sites, animation-heavy pages with no reduced-motion handling are one of the clearest fix-to-effort ratios in the whole report: real harm on one side, an afternoon on the other.

The word “nonessential” is doing work there, and it points at the interesting judgment call. Reduced motion doesn’t mean no motion. A spinner that indicates loading is information; a brief highlight showing which item you just added is information; removing those would make the site less usable. What the preference targets is motion as decoration: the entrance animations, the parallax, the looping backgrounds, the things that move because a designer enjoyed making them move. A good rule is to ask, for each animation, what a user learns from it. If the answer is nothing, it’s exactly the thing the preference exists to remove. Going through that exercise tends to improve the site for everyone, because most sites are carrying more decorative motion than anyone would defend one animation at a time.

I’d add a broader observation. Respecting prefers-reduced-motion is part of a family of behaviors, honoring dark mode, honoring the user’s font-size settings, honoring their language preference, that share a principle: when the user’s device tells you what the user wants, believe it. The web’s architecture is unusually good at carrying these signals, and a site that listens to them feels different to use in a way people notice without being able to name. It feels considerate. Sites earn trust the same way people do, through small acts of paying attention, and here is a place where paying attention has been reduced to reading a boolean.

So the cost of ignoring reduced-motion preferences comes in two parts. The visible part is the excluded visitors, the people for whom your animation choices are a wall, quietly bouncing at whatever rate they bounce. The less visible part is what the neglect says about the site: that a clearly expressed customer preference, deliverable at trivial cost, went unread. Most accessibility work involves inferring needs you can’t observe. This one is the opposite. The user filled out the form. All you have to do is read it.