Test your website →

Blog

Motion, Autoplay, and the Users You're Making Sick

Animation on the web can cause real physical symptoms, and respecting that costs one CSS media query.

Most accessibility problems exclude people. Motion is the rare one that hurts them. A parallax background, an autoplaying hero video, elements that zoom and slide as you scroll: for a meaningful group of users these don’t read as polish. They cause dizziness, nausea, headaches, and in some cases migraines that end the workday. The technical term is vestibular disorder, a problem with the inner-ear system that tells your brain how your body is moving. When the eyes report motion the inner ear doesn’t confirm, some brains handle the disagreement badly. It’s the same mechanism as seasickness, except the sea is your landing page.

I find most developers have simply never heard this. It isn’t in the standard curriculum, and the feedback loop that would teach it is broken in a particularly complete way. Someone who gets dizzy on your site doesn’t write to you about it. They close the tab, often mid-symptom, and they’ve usually learned not to bother reporting, because the animation was obviously intentional. You shipped it on purpose. What’s the complaint, “your design works as designed”? So the harm stays private, the site keeps its award-bait scroll effects, and everyone involved remains sincerely unaware.

Let me be concrete about which motion is risky, because the answer isn’t “all of it.” A button that brightens on hover is fine. A menu that fades in is fine. The problems cluster around motion that is large, sustained, or disconnected from the user’s own actions. Parallax scrolling is the classic offender, because it makes different layers of the page move at different speeds, which is precisely the visual signature of the world moving around you. Big zooms and slides that fire as you scroll are next, because they turn the user’s own scrolling, normally a predictable motion they control, into a trigger for motion they don’t. And autoplaying video is its own category of trouble: motion that starts without being asked, in the corner of the eye, while the user is trying to read.

Autoplay deserves an extra paragraph because it manages to be bad along several axes at once. Beyond the vestibular issue, it competes for attention with the content, which is a direct cost to users with attention disorders and an indirect cost to everyone. If it has sound, it hijacks screen reader users’ audio channel, the one they need to navigate. It burns mobile data the visitor didn’t offer. And WCAG has a specific requirement here that’s worth knowing even if you never read the spec: content that moves or auto-updates for more than five seconds needs a way to pause, stop, or hide it. Not a request. A pause button. If your hero video loops forever with no control, that’s a failure with a bright line under it.

Here’s the part that should change your mind if the harm alone doesn’t: the fix does not require giving up motion. Operating systems have a setting, usually called something like “reduce motion,” that users with vestibular disorders turn on. Browsers expose it to your CSS as a media query: prefers-reduced-motion. You wrap your animations so that when the visitor has asked for reduced motion, transitions become instant or near-instant, parallax flattens, decorative movement stops. Everyone else gets the full choreography. The users who would be harmed get a calm page. One media query, and both audiences get the version of your site that’s right for them. There aren’t many places in engineering where the accommodation and the aesthetic coexist this cleanly, and it baffles me how rarely the query appears in the wild. When GazeSite scans sites with heavy animation, a reduced-motion fallback is almost never there. Not designed and rejected. Just never considered.

There’s a design lesson hiding under the medical one. Ask what the motion is for. Sometimes it’s genuinely communicative: an element sliding into a list shows where it went, a progress animation shows the system is working. That motion carries information, and reduced-motion users still need the information, just delivered gently, with a fade instead of a flight. But much of the web’s motion carries nothing. It exists because the tooling made it easy and stillness felt like a missed opportunity. That motion has a cost even for users it doesn’t sicken: it draws the eye, and the eye is the scarcest resource on the page. Every animated flourish is spending attention the visitor might have spent on your actual message. Motion sensitivity just makes the cost visible at its extreme.

The business framing writes itself, but I’ll write it anyway. Vestibular problems get more common with age, and the users most likely to be affected are disproportionately in the demographic with the most money to spend. When your animated landing page makes a fifty-five-year-old buyer feel carsick, she does not push through the nausea to read your pricing. She leaves, feeling vaguely worse than when she arrived, and associates the feeling with your brand. You paid an agency for that. Add the media query. Give the video a pause button. Let the motion be a gift the visitor can decline, and it goes back to being what you meant it to be: polish, not poison.

More articles

← All posts