She Closed the Tab in Four Seconds
She clicks a link to an agency's homepage. The hero loads: a full-screen parallax scene, background layers drifting at different speeds as she scrolls, a looping video sliding behind the headline. It's the kind of thing a designer would proudly screenshot for a portfolio.
Four seconds later, she's closing the tab. Not because the copy was weak or the offer wasn't compelling — she never got that far. She has a vestibular disorder, and large-scale motion like that triggers real, physical dizziness and nausea. The room-tilting sensation of a parallax background sliding past faster than the foreground is exactly the kind of visual conflict her inner ear can't reconcile. She's gone before the "book a call" button even finishes fading in.
Nobody on that project set out to hurt anyone. Nobody even asked the question that would have prevented it: did this visitor's device tell us she wanted the motion turned off? It did. The site just wasn't listening.
Motion Isn't the Problem — Motion Nobody Can Escape Is
Let's be clear about what this article is not saying: animation is not the enemy. A loading spinner, a button that gently depresses on click, a smooth transition between two states of a form — these are useful, often essential, and generally fine. They tell the user something happened. They orient. They confirm.
The failures that matter — the ones that make people physically ill and drive them off a page — come from a different category entirely: large-scale, non-essential, inescapable motion that the user never asked for and has no way to turn off. Full-viewport parallax scrolling. Zooming or panning background video. Spinning loaders that fill the screen instead of sitting quietly in a corner. Auto-advancing carousels that never stop moving.
Vestibular disorders — conditions affecting the inner ear and the balance-related systems tied to it — are a real, documented disability category, and this kind of large-scale visual motion is a known trigger. It's not squeamishness or a design preference. It's dizziness, disorientation, and nausea, the same way a car full of people can feel fine while one person in the back seat gets carsick from the exact same motion everyone else barely notices.
What WCAG Actually Requires — and Where It Stops
This is where a lot of teams get confused, because WCAG's motion-related criteria don't all sit at the same level, and they don't all cover the same failure.
2.3.1 Three Flashes or Below Threshold (Level A) is the strictest of the group. It prohibits content that flashes more than three times in any one-second period, unless the flashing area is small enough to fall under specific size thresholds. This exists for one reason: to prevent triggering photosensitive seizures. Because the consequence of a failure here is severe, this criterion gets treated strictly — there's no gray area about "well, it's only a little flashy."
2.2.2 Pause, Stop, Hide (Level A) is the one that catches most of what actually shows up on marketing sites. It requires that any moving, blinking, scrolling, or auto-updating content that starts automatically and lasts more than five seconds must have a way for the user to pause, stop, or hide it. This is the direct rule against:
- Auto-advancing image carousels and testimonial sliders
- Auto-playing background videos
- Continuously scrolling marquees or news tickers
If any of those run longer than five seconds with no visible pause control, that's a Level A failure — the baseline every site is expected to meet, not an aspirational extra.
2.3.3 Animation from Interactions (Level AAA) goes further, and this is the one most directly connected to vestibular disorders specifically. It states that motion animation triggered by user interaction can be disabled unless the animation is essential to the function or information being conveyed. It's an enhancement, not a required Level AA criterion — but it's the criterion that most precisely describes what a user with a vestibular disorder needs: the ability to turn off the parallax effect, the panning background, the interaction-triggered zoom, and just see the content.
The gap between "AAA, not required at AA" and "the right thing to build anyway" is exactly where prefers-reduced-motion lives.
The Tool That Closes the Gap: prefers-reduced-motion
Here's the practical mechanism. Every major operating system — Windows, macOS, iOS, Android — has a built-in "reduce motion" accessibility setting. The user turns it on once, at the OS level, and every application on that device is supposed to respect it.
On the web, that setting is exposed through a CSS media feature: @media (prefers-reduced-motion: reduce). It lets you write rules that only apply when a visitor has explicitly told their device they want less motion — no cookie banner, no popup asking permission, no extra click on your site at all. The preference already exists; the only question is whether your CSS checks for it.
A minimal version looks like this:
.hero-parallax {
transform: translateY(var(--scroll-offset));
}
@media (prefers-reduced-motion: reduce) {
.hero-parallax {
transform: none;
}
}
The parallax effect still exists for everyone who hasn't asked for less motion. For the visitor who has, the background simply sits still. Same page, same content, same message — no dizziness, no nausea, no closed tab.
Don't Forget the Audio Half of This Problem
Autoplaying video doesn't only raise a motion problem — if it plays with sound, it also intersects with 1.4.2 Audio Control (Level A), which requires a way to pause or stop any audio that plays automatically for more than three seconds, or control its volume independently of system volume. A hero video that suddenly blasts audio the moment the page loads is a compounding failure: it's disorienting motion and unexpected, uncontrollable sound at the same time. The fix is simple and should be the default anyway — never autoplay video with sound on.
A Practical Checklist
You don't need to redesign anything to fix most of this. You need to audit it:
- Wrap non-essential decorative animation — parallax, large hero effects, auto-playing background motion — in a
@media (prefers-reduced-motion: reduce)query that removes or simplifies it. - Give every carousel and auto-advancing element a visible, reachable pause control (required under 2.2.2 once it runs past five seconds).
- Never autoplay video with sound by default.
- Test any scroll-triggered or flashing animation against the three-flashes-per-second threshold in 2.3.1.
- Leave purposeful, small-scale motion alone — loading indicators and state-change transitions are not the problem and don't need to be stripped out.
Run that list against your homepage today. If your hero has a parallax effect, open dev tools, simulate prefers-reduced-motion: reduce, and reload. If nothing changes, you've just found the exact gap that closed the tab in our opening story.
The Bottom Line
Motion isn't banned. Inescapable motion is the failure. WCAG already draws the lines clearly: 2.3.1 stops seizure-triggering flashing outright, 2.2.2 requires a pause control on anything that moves for more than five seconds, and 2.3.3 — while only a AAA enhancement — describes exactly what a visitor with a vestibular disorder needs: the option to turn interaction-triggered animation off. prefers-reduced-motion is the one line of CSS that lets you honor that option automatically, for every visitor whose device already asked on their behalf.
A slick homepage and a safe one aren't in conflict. You just have to ask the question your CSS should already be asking.
Explore our resources and get your site's motion and animation checked against WCAG before the next visitor with a vestibular disorder has to close the tab to feel okay again.