Accessible website animation means motion that nobody is forced to sit through and that never makes anyone ill. In practice that comes down to three things: respect the operating system's reduce motion setting with prefers-reduced-motion, give users a pause control for anything that loops or auto-plays, and never flash. Do those well and you keep the motion for everyone else.
The mistake is treating reduced motion as "turn everything off." Done right, it's a second, calmer design of the same site.
Who animation can hurt
Motion sensitivity is common, not niche. A Johns Hopkins study using US national health survey data found evidence of vestibular dysfunction in 35.4% of US adults aged 40 and older. Not all of those people react to screen motion, but the vestibular system (the inner-ear balance sense) is exactly what large on-screen movement can confuse.
The W3C describes vestibular reactions as "dizziness, nausea and headaches", and names parallax scrolling as a common trigger. MDN adds that scaling or panning large objects is a known problem. Other groups affected: people with attention-related conditions, who find constant motion distracting, and people with photosensitive epilepsy, for whom flashing is dangerous.
What WCAG says about animation
Three success criteria in WCAG 2.2 cover most of it.
| Criterion | Level | What it requires | Typical animated-site trigger |
|---|---|---|---|
| 2.2.2 Pause, Stop, Hide | A | Pause, stop or hide anything that moves automatically, lasts over 5 seconds and runs alongside other content | Hero video loops, marquees, carousels, ambient 3D |
| 2.3.1 Three Flashes or Below Threshold | A | Nothing flashes more than three times per second (above set thresholds) | Strobe-style transitions, glitch effects |
| 2.3.3 Animation from Interactions | AAA | Motion triggered by interaction can be disabled, unless essential | Parallax, scroll-triggered zooms, page-flip transitions |
Level A criteria are part of every WCAG conformance level, including the AA level most compliance work targets. The European Commission lists e-commerce among the services covered by the European Accessibility Act. AAA criteria like 2.3.3 are not usually mandated, but for a motion-heavy site it's the one that matters most to users. This is an explanation, not legal advice.
Two details people miss on 2.2.2: the five-second exception applies to moving content only, and W3C recommends one control that pauses all qualifying motion on the page rather than a button per element.
prefers-reduced-motion: how it works
Users set it once in their OS, and browsers expose it to CSS and JavaScript. Per MDN:
- iOS: Settings > Accessibility > Motion
- macOS: System Settings > Accessibility > Display (or Motion, on newer versions) > Reduce motion
- Windows 11: Settings > Accessibility > Visual Effects > Animation Effects
- Android 9+: Settings > Accessibility > Remove animations
A minimal pattern for CSS and GSAP:
@media (prefers-reduced-motion: reduce) {
.reveal { transition: opacity 150ms ease-out; transform: none; }
}
const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
gsap.from(".reveal", { y: 40, opacity: 0, stagger: 0.06 });
});
mm.add("(prefers-reduced-motion: reduce)", () => {
gsap.from(".reveal", { opacity: 0, duration: 0.15 });
});
W3C lists this exact media-query approach (techniques C39 and SCR40) as sufficient for 2.3.3.
Reduced motion as a design state, not an off switch
Killing every animation makes the site feel broken: no feedback, content popping in, no character. Replace motion instead.
| Full motion | Reduced-motion version |
|---|---|
| Parallax layers | Static layers, no depth movement |
| Text slides up 40 px | Text fades in, 150 ms |
| Scroll-scrubbed 3D product | Three still frames with captions |
| Auto-rotating 3D model | Static poster, rotate on drag only |
| Page slide transition | Quick crossfade |
| Cursor-reactive hero | Final composed frame |
| Hover scale on cards | Color or border change |
Small feedback (a button press, a focus ring) can stay. It's large, unexpected movement across big areas that causes trouble. If your brand has a motion design system, add a reduced-motion token next to your easing and duration tokens so every new component ships with both states.
Pause controls for loops and video
Background video and loops are the most common 2.2.2 issue on modern sites. The fix:
- A visible pause button on every auto-playing loop, reachable by keyboard, with an accessible name that changes ("Pause background video" / "Play background video").
- Don't autoplay under reduced motion. Show the poster frame and let users start it.
- Remember the choice for the session, so a paused video stays paused on the next page.
- Pause off-screen. Stops motion nobody is watching, and saves battery.
Our guide to website background video covers the encoding and iPhone autoplay side.
Audit your motion
Turn on Reduce Motion on your phone and laptop and walk every page. Note each animation, whether it auto-plays, has a pause, and what replaces it. Check performance in the same pass: reduced motion often removes main-thread work, which helps the metrics in do animations slow down your website?
