WCAG 2.3.3 Animation from Interactions: How to Reduce Motion Safely

Last updated: 2026-04-02

Level AAA Operable WCAG 2.3.3

What This Criterion Requires

WCAG 2.3.3 requires that motion animation triggered by user interaction can be disabled, unless the animation is essential to the functionality or information being conveyed. Modern websites frequently use animations for scrolling effects, page transitions, hover states, expanding menus, and micro-interactions. While these animations can enhance the user experience for many people, they can cause serious problems for users with vestibular disorders, motion sensitivity, or certain types of migraine. Affected users may experience dizziness, nausea, headaches, or disorientation when exposed to unnecessary motion. The prefers-reduced-motion CSS media query provides a straightforward mechanism for respecting user preferences set at the operating system level. Developers should use this media query to disable or reduce non-essential animations, and ideally provide an in-page toggle for users who have not configured their OS settings.

Why It Matters

Vestibular disorders affect roughly 35% of adults over the age of 40 in some capacity, and motion sensitivity can also be triggered by concussions, inner ear conditions, and neurological conditions. When a website plays sliding, zooming, or parallax animations in response to scrolling or clicking, affected users may experience physical symptoms severe enough to force them to close the browser entirely. This is not merely a preference or comfort issue but a genuine barrier to access. Beyond vestibular disorders, excessive animation can also distract users with attention-related disabilities such as ADHD, making it harder to focus on content. Implementing motion controls is technically straightforward using CSS media queries and JavaScript, making this one of the most cost-effective accessibility improvements a development team can make. Respecting the prefers-reduced-motion setting also signals to all users that the site prioritizes their comfort and control.

Common Failures and How to Fix Them

Ignoring prefers-reduced-motion media query

The site uses CSS animations and transitions throughout but does not include any prefers-reduced-motion media query to reduce or disable motion for users who have requested it in their operating system settings.

Inaccessible 
.card {
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: scale(1.05) rotate(2deg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
Accessible 
.card {
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: scale(1.05) rotate(2deg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  .card:hover {
    transform: none;
  }
}

Parallax scrolling without motion alternative

The page uses parallax scrolling effects where background images move at different speeds than foreground content. This creates a sense of depth but can cause severe dizziness and nausea for users with vestibular sensitivities. No option is provided to disable the effect.

Inaccessible 
<section class="parallax-section" style="background-attachment: fixed; background-position: center; background-size: cover;">
  <h2>Our Services</h2>
</section>
Accessible 
<section class="parallax-section">
  <h2>Our Services</h2>
</section>

<style>
.parallax-section {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
@media (prefers-reduced-motion: reduce) {
  .parallax-section {
    background-attachment: scroll;
  }
}
</style>

Auto-playing animated content on scroll

Elements animate into view (sliding, fading, bouncing) as the user scrolls down the page using libraries like AOS or ScrollReveal, with no way to disable the animations.

Inaccessible 
<div data-aos="slide-up" data-aos-duration="1000">
  <h3>Feature One</h3>
  <p>Description of the feature.</p>
</div>
Accessible 
<div data-aos="fade" data-aos-duration="300">
  <h3>Feature One</h3>
  <p>Description of the feature.</p>
</div>

<script>
// Disable AOS animations if user prefers reduced motion
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  AOS.init({ disable: true });
}
</script>

How to Test

  1. Enable 'Reduce motion' in your operating system accessibility settings (macOS: System Settings > Accessibility > Display > Reduce Motion; Windows: Settings > Accessibility > Visual Effects > Animation Effects off; iOS: Settings > Accessibility > Motion > Reduce Motion).
  2. Navigate through the website and interact with all elements. Verify that non-essential animations are either removed or significantly reduced.
  3. Check CSS files for @media (prefers-reduced-motion: reduce) queries that disable or simplify transitions and animations.
  4. Test any animation libraries (AOS, GSAP, Framer Motion) to ensure they respect the reduced motion preference via their configuration or a custom check.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria