# Your Parallax Hero Makes People Sick: prefers-reduced-motion and WCAG 2.3.3

Source: https://a11yshieldhq.com/blog/2026-11-10-prefers-reduced-motion-parallax-vestibular.html

November 10, 2026

*Scroll a modern storefront homepage and the page answers with layers drifting at different speeds, heroes zooming, and cards sliding in from the sides. For someone with a vestibular disorder, that answer can mean hours of dizziness and nausea, sometimes bad enough to need bed rest to recover.*

## The number behind the complaint

In 2009 a team at Johns Hopkins published an analysis of balance testing from 5,086 participants in the National Health and Nutrition Examination Survey, covering 2001 to 2004. They found vestibular dysfunction in 35.4 percent of US adults aged 40 and older, around 69 million people. Vestibular migraine, Meniere's disease, labyrinthitis, and post-concussion syndrome all sit in that group, and the symptoms they report from screen motion are vertigo, nausea, headaches, and disorientation that can last hours after exposure. This is not a preference for calmer design. It is a physical reaction to a visual signal the inner ear disagrees with.

The standard has a criterion for exactly this. Success Criterion 2.3.3, Animation from Interactions, says motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed. It is Level AAA, which is why teams targeting AA skip it, and that is the gap where most of the motion on the modern web lives. A site can conform fully at AA and still fill its homepage with parallax that makes a portion of its visitors ill. The W3C understanding document for 2.3.3 is unusually direct about consequences, and it names parallax scrolling specifically.

## What counts as motion, and what does not

The criterion covers motion animation triggered by interaction: parallax scrolling, scroll-triggered reveals, page transitions, hover-launched zooms. The WCAG definition is the addition of steps between conditions to create the illusion of movement. Color changes, opacity fades, and blurs are explicitly not motion animation. Autoplaying motion like carousels and background video is a different criterion, 2.2.2 Pause, Stop, Hide, which applies when the page starts the animation itself and it runs more than five seconds. The distinction matters because teams often assume 2.2.2 covers their scroll effects. It does not.

The fix is one CSS media query, and it reads an operating system setting the user has already set. Wrap non-essential motion so it only runs when the user has no preference: @media (prefers-reduced-motion: no-preference). Inside the reduce branch, replace movement with an instant state change or a fade rather than deleting feedback entirely. The JavaScript-driven effects need the same gate, because GSAP scenes, ScrollTrigger setups, and smooth-scroll libraries bypass CSS entirely. Check window.matchMedia('(prefers-reduced-motion: reduce)') and skip the animation or jump straight to the end state. Test it the way a user sets it: macOS System Settings, Accessibility, Display, Reduce motion, and the equivalents on Windows, iOS, and Android.

## The part teams get wrong

The common failure is gating only the CSS and forgetting the JavaScript, or gating the hero and forgetting the scroll reveals on the product grid. The other failure is treating the reduced-motion branch as a punishment: stripping all feedback so the reduced-motion experience feels broken. A loading spinner or a drag preview conveys function, not flourish, and it can keep running at a subtler amplitude. What has to go is the decorative movement, the layers drifting and the cards swooping in. If you are auditing the rest of the interaction layer, [Focus Not Obscured: Sticky Headers and the Keyboard](https://a11yshieldhq.com/blog/2026-11-06-focus-not-obscured-sticky-headers-keyboard.md) covers the focus side of the same problem, and [the skip link test](https://a11yshieldhq.com/blog/2026-11-09-skip-links-30-second-keyboard-test.md) takes thirty seconds and catches half of keyboard failures.

## Frequently asked questions

### Is 2.3.3 required if we only target WCAG AA?

Strictly, no. 2.3.3 is Level AAA. But the harm is real at any conformance level, and vestibular complaints and accessibility filings do not stop at AA. Honoring prefers-reduced-motion is one of the lowest cost, highest impact fixes available.

### Does prefers-reduced-motion turn off all animation?

Only what you gate behind it. Color changes, opacity fades, and blurs are not motion animation under the criterion, and functional feedback like spinners can keep running at a subtler amplitude. Gate the decorative movement, not the feedback.

### Where do users set this?

At the operating system level, not in the browser. macOS has it under Accessibility, Display, Reduce motion. Windows has it under Accessibility, Visual effects. iOS and Android both expose it in accessibility settings. Your site reads the switch; it does not offer its own.

### What about JavaScript animations like GSAP?

They bypass CSS entirely, so the media query alone does nothing for them. Check window.matchMedia('(prefers-reduced-motion: reduce)') in your animation code and skip the tween or jump to the end state when it matches.