2.3.3 Animation from Interactions

Level AAA · added in WCAG 2.1

Motion animation that a user's action triggers, such as scrolling, clicking or hovering, must be possible to turn off. The exception is animation that is essential to the function or the information.

Who it helps

People with vestibular disorders can get dizzy, nauseous or a migraine from parallax, zooming and sliding effects, sometimes for hours. People with attention disabilities are also distracted by extra motion.

How to meet it

Wrap nonessential motion in a prefers-reduced-motion media query, so it stops when users turn on reduce motion in their system settings.
Or add a site-wide setting that turns off nonessential animation, and remember the choice.
Replace motion with a non-moving change when motion is reduced, such as a short opacity fade or an instant state change.
Focus on movement: parallax, scroll-triggered slides, zooms, spins and smooth scrolling. Color and opacity changes are not motion animation.
Level AAA is not required by most laws or policies, which point to AA. It is still worth meeting where you can.

Examples

Fails:Cards slide up and scale in as you scroll, with no way to turn it off

.reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  transition: opacity 0.6s, transform 0.6s;
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}

Fails:Smooth scrolling for every in-page link, whatever the user's settings

html {
  scroll-behavior: smooth;
}

Passes:With reduce motion on, the cards only fade in

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none;
    transition: opacity 0.2s;
  }
}

Passes:Smooth scrolling only for users who have not asked for less motion

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

Can a scanner detect this?

axe-core has no rule for this criterion, because it cannot trigger interactions and judge the motion that follows. Turn on reduce motion in your operating system, then scroll, click and hover through the page to check what still moves.

No automated rule tests this criterion. Check it by hand.

Common mistakes

Adding a parallax or scroll animation library without checking whether it respects prefers-reduced-motion.
Setting transition-duration to 0.01ms under reduced motion but leaving large JavaScript-driven movement in place.
Respecting reduce motion in CSS but not in animations started from JavaScript.
Calling decorative motion essential when the page works just as well without it.

Official W3C explanation of 2.3.3

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026