Reviewed November 11, 2026

Reduced Motion: The One Setting That Stops Your Store Making Shoppers Dizzy

A carousel that slides on its own, a parallax hero that moves as you scroll, and a product image that zooms on hover are all motion, and for a shopper with a vestibular disorder, that motion can mean minutes or hours of dizziness and nausea. The vestibular system in the inner ear keeps track of balance, and when the eyes report movement the body does not feel, a damaged or sensitive system answers with vertigo, headaches, and disorientation. About 35 percent of US adults aged 40 and over show signs of vestibular dysfunction, around 69 million people. The fix is one media query: prefers-reduced-motion. When the user's operating system says reduce, the site turns off parallax, stops autoplay, and replaces slide-ins with an instant appearance. WCAG 2.3.3, Animation from Interactions, requires that motion triggered by interaction can be disabled, and the W3C lists the prefers-reduced-motion query as the way to satisfy it.

Who motion harms, and how

The largest group is people with vestibular disorders. The vestibular system, in the inner ear and the brain, keeps track of balance and movement. When the eyes report movement the body does not feel, a damaged or sensitive system can answer with dizziness, nausea, headaches, or a loss of balance. The conditions include vestibular migraine, Meniere's disease, labyrinthitis, and post-concussion syndrome, and the symptoms can last hours after exposure. A US national health survey found signs of vestibular dysfunction in about 35 percent of adults aged 40 and over, around 69 million people. This is not a rare edge case. The harm model is vestibular: it is movement across the visual field, especially large or parallax movement, that triggers dizziness and nausea. Parallax scrolling, where backgrounds move at a different rate to foregrounds, is the single most common trigger on the modern web, because the page moves at a speed that does not match the scroll. The W3C understanding document for 2.3.3 is unusually direct about consequences: affected users can experience dizziness, nausea, and headaches, and migraine headaches, with reactions severe enough to require bed rest to recover.

The three rules, and the gap between them

Three success criteria in WCAG 2.2 deal with movement and flashing, and they cover different motion. Pause, Stop, Hide, 2.2.2 at Level A, requires that any moving, blinking, scrolling, or auto-updating content lasting more than five seconds can be paused, stopped, or hidden. That is the rule for carousels, tickers, and autoplaying video, and it is the one most stores already fail, because their carousels advance on their own with no pause button. Three Flashes or Below Threshold, 2.3.1 at Level A, bans anything flashing more than three times in any one second, because that is a seizure risk for people with photosensitive epilepsy. Animation from Interactions, 2.3.3 at Level AAA, requires that motion triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed. The gap between 2.2.2 and 2.3.3 is where most of the motion on the modern web lives. A parallax page never autoplays, so 2.2.2 does not catch it, and never flashes, so the flashing rules do not catch it, yet it is one of the most common triggers of vestibular symptoms. That is precisely why 2.3.3 was added. It is Level AAA, so it is rarely mandatory, but it is cheap to meet, and the W3C lists the prefers-reduced-motion query as the way to satisfy it, in technique C39.

The one setting that fixes most of it

Every modern operating system, Windows, macOS, iOS, Android, has a setting called Reduce Motion. When someone who is sensitive to motion turns it on, their device broadcasts a quiet signal that any website can read: this person does not want animation. The technical name is prefers-reduced-motion, and it has two values: reduce, when the user has asked for less motion, and no-preference, when they have not. The CSS is a single media query that sets animation durations to near zero and disables transitions for users who asked for it, and the JavaScript checks matchMedia before starting any carousel or animation, and listens for changes so the site responds if the user toggles the setting mid-session. Autoplaying background video should be gated on prefers-reduced-motion: no-preference, or shipped as a static poster image by default. The worst offenders to audit first are parallax scrolling, autoplay carousels and sliders, and looping background video. The European Accessibility Act has applied to many consumer websites since June 2025, with compliance generally measured against WCAG 2.1 Level AA, and the EU standard EN 301 549 points to the same criteria. Conformance will not get you across the gap between 2.2.2 and 2.3.3. Only a decision will, and the decision is one media query.

Frequently asked questions

What is prefers-reduced-motion?

A CSS media query that reads the user's operating-system setting for reduced motion. Every major operating system has a Reduce Motion setting, and when a user turns it on, the browser exposes it as prefers-reduced-motion: reduce. The site can read that signal and turn off parallax, stop autoplay, and replace slide-in animations with an instant appearance. It has two values: reduce, when the user has asked for less motion, and no-preference, when they have not.

Which WCAG criteria cover motion?

Three. Pause, Stop, Hide, 2.2.2 at Level A, requires that any moving, blinking, scrolling, or auto-updating content lasting more than five seconds can be paused, stopped, or hidden. That covers carousels, tickers, and autoplaying video. Three Flashes or Below Threshold, 2.3.1 at Level A, bans anything flashing more than three times per second, because that is a seizure risk. Animation from Interactions, 2.3.3 at Level AAA, requires that motion triggered by interaction can be disabled, unless the animation is essential. Parallax scrolling is the case 2.3.3 was written for, because it never autoplays and never flashes, so the other two criteria do not catch it.

Do I have to remove all animation for reduced-motion users?

No. Replace movement with an instant or fading equivalent rather than deleting feedback entirely. A product image that zooms on hover can appear at full size instantly instead of zooming. A carousel can stop auto-advancing and wait for the user to click next. A slide-in can fade in or appear immediately. Color changes, opacity fades, and blurs are explicitly not motion animation under the criterion, so they can stay. The goal is to remove the movement across the visual field, not to remove all feedback.

How do I test reduced motion on my store?

Turn on Reduce Motion on your own device, in the accessibility settings, and load the store. The carousel should not advance on its own, the parallax hero should not move as you scroll, and the background video should be a static poster image. Then check the code: the theme should have a prefers-reduced-motion media query that sets animation durations to near zero and disables autoplay, and the JavaScript should check matchMedia before starting any carousel or animation. If the site moves the same way with Reduce Motion on as with it off, the setting is being ignored.