Level AAAWCAG 2.1

2.3.3 Animation from Interactions

Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.

Last reviewed: September 9, 2026

Understanding 2.3.3

Non-essential motion animation triggered by scrolling, hovering, dragging, or other interactions can cause dizziness, nausea, or disorientation for users with vestibular disorders. This criterion requires that such interaction-triggered animation can be disabled so vestibular-sensitive users can browse without triggering symptoms, unless the animation is essential to the functionality or the information being conveyed.

How to Meet It

Respect the operating system's reduced-motion preference using the prefers-reduced-motion CSS media query (or the equivalent platform API) to disable or substantially reduce parallax effects, zoom transitions, auto-panning, and similar interaction-triggered animations. Alternatively, provide an in-app toggle for turning off decorative motion effects. Animation essential to functionality or meaning, such as a loading spinner, remains exempt.

Code Examples

INCORRECT

.card {
  transition: transform 0.6s ease;
}
.card:hover {
  transform: scale(1.5) rotate(10deg); /* Large parallax/zoom effect always plays, with no way to disable it */
}

CORRECT

.card {
  transition: transform 0.6s ease;
}
.card:hover {
  transform: scale(1.5) rotate(10deg);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  .card:hover {
    transform: none; /* Respects the user's OS-level reduced-motion preference */
  }
}

Frequently Asked Questions

Does this mean all animations must be made disableable?

No. Only non-essential motion animation triggered by user interaction, such as parallax scrolling or hover-zoom effects, needs a way to be disabled. Animation essential to functionality or the information being conveyed, such as a loading spinner or a drag-and-drop drop-zone highlight, is exempt.

Is honoring prefers-reduced-motion enough on its own to meet this criterion?

Honoring the OS-level prefers-reduced-motion setting is the most common and recommended way to meet 2.3.3, since it requires no custom UI. You can also meet it by providing your own in-app control, as long as users have some way to disable the non-essential animation.

Related Success Criteria

2.3.1 Three Flashes or Below Threshold 2.3.2 Three Flashes

Quick Facts

Criterion2.3.3
LevelAAA
IntroducedWCAG 2.1

Automate Compliance

AccessiSight automatically scans and identifies 2.3.3 issues in your codebase.

Try Scanner Free