Reduced Motion and Animation Accessibility

Animation brings pages to life, but for some visitors it causes real problems. People with vestibular disorders can feel dizzy or nauseated when large areas of a page move. Others find moving content distracting, which makes reading hard. Seizure triggers are a serious risk. Accessible animation respects all of this.

Who is affected

People with vestibular disorders or motion sensitivity
People with attention or cognitive difficulties
People with migraines triggered by motion or flashing
People with photosensitive epilepsy
People with low vision who find moving text hard to track

The reduced motion setting

Operating systems let people choose "reduce motion." Browsers pass this to websites, and CSS can respond with the prefers-reduced-motion media query. When the preference is set, you should remove or tone down non-essential animation.

What to change under reduced motion:

Replace large movements, such as parallax, zooms, and sliding panels, with simple fades or instant changes
Stop auto-playing background videos and looping animations
Replace smooth scrolling effects with normal scrolling
Keep essential feedback, but make it subtle

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

That snippet is a blunt starting point. Better to design reduced-motion alternatives deliberately.

WCAG requirements

Pause, Stop, Hide (Level A). If content moves, blinks, or scrolls automatically for more than five seconds and is shown alongside other content, users must be able to pause, stop, or hide it. This applies to carousels, auto-playing video loops, and tickers.
Three Flashes or Below Threshold (Level A). Nothing should flash more than three times in any one second, unless the flashes are below general and red flash thresholds. Avoid flashing content altogether.
Animation from Interactions (Level AAA). Motion triggered by interaction should be possible to disable unless it's essential.

See website accessibility basics.

Practical guidelines

Use motion with purpose. Does it help understanding or only decorate? See animation and motion in web design.
Avoid large-scale movement, especially parallax and zooming backgrounds.
Provide pause controls for carousels and auto-moving content, or avoid autoplay.
Keep durations short and use gentle easing.
Don't hide information in animation. Important content shouldn't appear only briefly.
Avoid flashing, period.
Use opacity and small transforms rather than big sweeping effects.
Test with reduced motion on. Turn on the setting in your operating system and browse your site.

Don't break the page

When motion is reduced, content should still appear and work. A hidden element that only becomes visible through an animation could stay invisible if the animation is removed. Make sure the end state is the default.

Performance bonus

Less animation also reduces CPU use and helps responsiveness. See how to improve INP.

Scroll-triggered effects

Fade-in-on-scroll effects are popular but can hide content if scripts fail or if reduced motion is set. Make them optional and safe.

Videos

Don't autoplay, and provide controls. See using video on your website.

The bottom line

Respect the reduced-motion setting, give users control over anything that moves, and never flash. Calm design is better for everyone.