Question 1

What is prefers-reduced-motion?

Accepted Answer

prefers-reduced-motion is a CSS media query that detects if the user has requested reduced motion in their operating system accessibility settings.
      How to enable it:
      
        Windows: Settings → Accessibility → Visual Effects → Animation effects (toggle off)
        macOS: System Preferences → Accessibility → Display → Reduce motion
        iOS: Settings → Accessibility → Motion → Reduce Motion
        Android: Settings → Accessibility → Remove animations
      
      CSS usage:
      @media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
  }
}

Question 2

Why do some users need reduced motion?

Accepted Answer

Motion and animation can cause serious issues for users with:
      
        Vestibular disorders: Inner ear problems causing dizziness, vertigo, nausea from motion
        Migraine: Animations can trigger severe headaches
        Seizure disorders: Flashing or rapid motion can cause seizures
        ADHD: Animations distract and make focusing on content difficult
        Autism: Sensory overload from excessive movement
        Motion sickness: Parallax and scrolling effects cause nausea
      
      For these users, animations aren't just annoying - they can make websites completely unusable or even cause physical harm.

Question 3

What should I do when prefers-reduced-motion is enabled?

Accepted Answer

When users enable reduced motion, you should:
      
        Remove animations entirely: Set animation: none and transition: none
        Reduce duration: Make transitions very short (0.01ms)
        Disable parallax: Use static positioning instead
        Stop auto-play: Disable auto-playing carousels and videos
        Remove loading spinners: Use static progress indicators
        Simplify transitions: Use instant state changes instead
      
      Keep essential feedback: You can keep very subtle transitions for things like :focus states - just make them immediate (0.1s max).
      Example:
      @media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Allow essential focus indicators */
  *:focus {
    transition: outline 0.1s;
  }
}

Question 4

Are there animations that should NEVER be disabled?

Accepted Answer

Even with reduced motion, some visual feedback is important:
      Keep these (but make subtle):
      
        Focus indicators (:focus outlines)
        Hover states on interactive elements
        Loading/progress indicators (use static instead of spinning)
        Form validation feedback (instant, no delay)
      
      Disable these completely:
      
        Parallax scrolling effects
        Auto-playing carousels
        Decorative animations
        Infinite animations (spinners, pulses)
        Zoom/scale effects
        Rotating elements
        Background animations
      
      Key principle: Essential feedback can remain, but should be instant or very brief. Decorative motion must stop.

Question 5

What about auto-playing videos and carousels?

Accepted Answer

Auto-playing content is particularly problematic:
      WCAG 2.2.2 (Pause, Stop, Hide): Users must be able to pause, stop, or hide moving content.
      Best practices:
      
        Videos: Don't auto-play. Provide play/pause controls. Respect prefers-reduced-motion.
        Carousels: Provide pause button. Stop auto-advance when reduced motion enabled.
        Animations: Offer controls to pause/disable. Stop when user enables reduced motion.
      
      Example:
      const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

if (!prefersReducedMotion) {
  startCarousel();
}
      Remember: Motion that lasts more than 5 seconds MUST have controls (WCAG 2.2.2).

Question 6

How do I test if my site respects reduced motion?

Accepted Answer

Testing checklist for prefers-reduced-motion:
      
        Enable in OS: Turn on reduced motion in system settings
        Check media query: Use DevTools to verify @media (prefers-reduced-motion: reduce) is applied
        Test animations: Verify all decorative animations stop or reduce significantly
        Check carousels: Auto-advance should stop
        Test parallax: Parallax effects should be disabled
        Videos: Auto-play should be prevented
        Loading indicators: Should use static or minimal animation
        Hover effects: Can remain but should be instant
      
      Browser testing:
      // Chrome DevTools: Rendering → Emulate CSS media feature
// Firefox DevTools: Accessibility → Simulate → prefers-reduced-motion

Animation & Motion Tester – Test Reduced Motion

Animation & Motion Tester

WCAG 2.3.3

Requirements

Who's Affected

Best Practices

Examples of Real-World Usage

Web Developers

Accessibility Specialists

UX Designers

QA Testers

Product Managers

Frontend Engineers

Complete Animation Accessibility Testing

Live Animation Preview

Reduced Motion Toggle

System Preference Detection

CSS Implementation Guide

Multiple Animation Types

WCAG 2.3.3 Compliance

Educational Content

Accessibility Guidelines

How to Use the Animation & Motion Tester

Frequently Asked Questions

Still have questions?

Animation & Motion Tester

WCAG 2.3.3

Requirements

Who's Affected

Best Practices