Reduce Motion on Your Website: The Simple Fix Most Designers Miss

Reduce Motion on Your Website

Disability does not always look the way people expect it to. It looks different for everybody. Some disabilities are visible, like using a wheelchair or a limb difference you can see from across the room. Others are completely invisible, including vestibular disorders, migraines, and general motion sensitivity, none of which show up when you look at someone. That invisibility is exactly why so few businesses ever stop to reduce motion on your website, even though it can be the difference between a visitor staying on the page or quietly leaving it feeling sick.

This is not a niche complaint. The inner ear and brain conditions that control balance affect an estimated 33 million adults in the United States, and more than a third of adults over 40 experience some form of vestibular dysfunction in their lifetime, according to the Vestibular Disorders Association. Add in people with migraine disorders, general motion sickness, ADHD, and other sensory sensitivities, and you are talking about a significant share of your website’s visitors.

For many people, a website full of movement is not just annoying. It can trigger real nausea, vertigo, and headaches that end the visit before it starts, and you will likely never hear about it, because an invisible disability is not something a visitor announces on their way out the door.

Your Phone Already Solved What Your Website Hasn’t

Here is what makes this whole situation so frustrating. Every major operating system already has a setting for this. iPhones and iPads have a “Reduce Motion” toggle. Macs have it too. Android phones call it “Remove animations.” Windows has a “Show animations” setting you can turn off. People with motion sensitivity have known about these settings for years, and many of them turn that switch on the moment they set up a new device, the same way someone else might turn on dark mode.

The problem is that almost no website actually checks for that setting. A person can have reduced motion turned on at the system level, open a browser, land on a site, and get hit with the exact same spinning, sliding, autoplaying animations they specifically told their device they did not want to see. The accommodation exists. Most businesses just never thought about it, which is exactly why it is worth taking a few minutes to reduce motion on your website the way your visitors’ own devices already do for them.

How to Reduce Motion on Your Website With a Few Lines of CSS

The good news is that developers do not need to build anything complicated to reduce motion on your website. There is a CSS media query built for exactly this purpose, called prefers-reduced-motion. It reads the same operating system setting I just described and lets you write different styles for people who have requested less motion.

A basic version looks something like this:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

That single block tells the browser to shrink animations down to almost nothing and turn off smooth scrolling for anyone who has asked their device to reduce motion. You can get more specific too, disabling autoplaying video, pausing background animations, or removing parallax effects entirely for that group of users. The point is that you do not need to redesign your site or remove motion for everyone just to reduce motion on your website for the people who need it. It just means respecting the choice a visitor already made on their own device.

Why This Gets Skipped

I think most designers and developers are not ignoring this on purpose. Motion has become such a default expectation in web design, the fade-ins, the hover effects, the scroll-triggered animations, that nobody stops to ask whether every visitor wants to experience it that way. When you are not the person who gets dizzy from a sliding carousel, it is easy to never think about it.

I did not understand it myself until I felt it firsthand, and it made me think about my dad and everyone else who has been quietly avoiding things like this their whole life. That is exactly why I bring it up in projects now. I would rather flag it during a design review than have a visitor quietly leave your site feeling sick.

This is also a case where a small technical fix has a bigger impact than its size suggests. You do not need a full redesign. You need a developer who knows to reduce motion on your website for the specific slice of visitors who have already told their devices they need it. It is one of those items I always check for during an accessibility evaluation, because it gets missed so consistently, even on otherwise well-built sites.

It Is Part of a Bigger Pattern

If this is the first time you are hearing about prefers-reduced-motion, you are not alone, and it is worth looking at what else might be slipping through on your site. We have written before about the top accessibility mistakes businesses make, and motion is exactly the kind of issue that shows up alongside things like poor color contrast or confusing keyboard navigation.

It also connects directly to SEO. Google’s own guidance rewards sites that load cleanly and respect user preferences, which is part of why we cover SEO and accessibility together so often. Fixing motion is rarely a one-line task in isolation. It is usually a sign that it is time for a broader look at how your site handles preferences visitors have already set for themselves.

Let’s Fix It Together

If you are not sure whether your website respects reduced motion settings, or you want a full look at what else might be creating friction for your visitors, I would like to help. Our team at Equal Accessibility works with businesses to catch these gaps before they cost you customers. We can show you exactly where to reduce motion on your website, walk through the fix with your developer, and check for the other issues that tend to travel alongside it. Reach out to us and let’s talk about what it would take to reduce motion on your website, and make sure everyone who visits can actually stay on the page.

About The Author