WCAG 2.3.3 — Animation from Interactions

Motion and Animation Issues

What is this issue?

Motion and animation issues occur when websites use motion effects -- parallax scrolling, page transitions, animated reveals, hover animations, and background animations -- without providing a way for users to disable or reduce them. WCAG Success Criterion 2.3.3 (Level AAA) and the closely related guideline 2.3.1 (Level A, for seizure-inducing content) address the need to give users control over motion. The prefers-reduced-motion media query allows developers to respect the user's system-level preference for reduced motion.

Motion on the web can trigger vestibular disorders, causing nausea, dizziness, and disorientation in affected users. An estimated 35% of adults over 40 have experienced some form of vestibular dysfunction. Parallax scrolling effects, where background and foreground move at different rates, are particularly problematic because they create a disconnect between the user's scrolling action and the visual response.

Beyond vestibular concerns, excessive animation distracts users with attention disorders (ADHD), increases cognitive load for users with cognitive disabilities, and wastes battery on mobile devices. Modern best practice is to check the prefers-reduced-motion media query and either remove or significantly reduce motion when the user has requested it.

Impact on users

For users with vestibular disorders, motion-heavy websites can cause physical symptoms: nausea, vertigo, headaches, and in severe cases, vomiting. These are not minor discomforts -- they can last for hours after the triggering exposure. Users with these conditions often avoid the web entirely during symptomatic periods, or they abandon sites that trigger their symptoms.

Users with ADHD find animations distracting. A constantly moving background, animated notification badges, or smooth page transitions that delay content access all reduce the user's ability to focus on the actual content. For users already struggling with attention regulation, these effects can make a site unusable.

Users with photosensitive epilepsy are at risk from flashing or strobing animations. While WCAG 2.3.1 specifically addresses seizure thresholds (no more than 3 flashes per second), any rapid animation can be uncomfortable. Respecting prefers-reduced-motion is a safety measure as well as a comfort one.

Code example

Before (non-compliant)

/* Animations without reduced-motion check */
.hero {
  animation: parallax 2s ease infinite;
}
.card {
  transition: transform 0.5s ease;
}
.card:hover {
  transform: scale(1.1) rotate(2deg);
}
.page-enter {
  animation: slideIn 0.8s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes parallax {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

After (compliant)

/* Respect user motion preferences */
.hero {
  animation: parallax 2s ease infinite;
}
.card {
  transition: transform 0.5s ease;
}
.card:hover {
  transform: scale(1.1) rotate(2deg);
}
.page-enter {
  animation: slideIn 0.8s cubic-bezier(0.2, 0, 0, 1);
}

/* Remove motion for users who prefer it reduced */
@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;
  }
  .card {
    transition: none;
  }
  .card:hover {
    transform: none;
  }
  .page-enter {
    animation: none;
  }
}

How Scrutia detects this issue

Scrutia detects CSS animations and transitions on your pages and checks whether the prefers-reduced-motion media query is used to disable or reduce them. It flags pages that contain motion effects without a corresponding @media (prefers-reduced-motion: reduce) override. The report lists each animated element and recommends the appropriate CSS to add.

Check your site for this issue

Scrutia audits your site against WCAG criteria in minutes.

Free audit

Frequently Asked Questions

What is prefers-reduced-motion?

prefers-reduced-motion is a CSS media query that detects whether the user has requested reduced motion at the operating system level. On macOS, this is set in System Preferences > Accessibility > Display > Reduce motion. On Windows, it is Settings > Ease of Access > Display > Show animations.

Should I remove all animations?

Not necessarily. When prefers-reduced-motion is active, you can replace complex animations with simpler ones (e.g., a fade instead of a slide), reduce animation duration, or remove only the most problematic effects like parallax. The goal is to reduce motion that could cause discomfort.

Does prefers-reduced-motion work in JavaScript?

Yes. Use window.matchMedia('(prefers-reduced-motion: reduce)').matches to check the preference in JavaScript. This allows you to disable JavaScript-driven animations like scroll-triggered effects, GSAP timelines, and Lottie animations.

Does your site have this issue?

Scrutia scans your pages against WCAG success criteria and delivers actionable fixes. Results in 5 minutes.

Run a free audit