Designing for Reduced Motion Sensitivities

Why Motion Sensitivity Matters

Modern web design increasingly relies on animation and motion to create engaging user experiences. However, these same effects can cause genuine physical distress for users with vestibular disorders. Vestibular (inner ear) disorder reactions include dizziness, nausea, migraine headaches, and disorientation--sometimes requiring bed rest to recover.

The solution lies in the prefers-reduced-motion CSS media feature, which detects whether users have requested their operating system minimize animation and motion effects. By implementing this feature correctly, websites can provide full-motion experiences to users who enjoy them while automatically reducing or eliminating animations for those who are sensitive to motion.

Implementing proper web accessibility practices like reduced motion support demonstrates commitment to inclusive design while improving experience for all users.

The prefers-reduced-motion Media Feature

The prefers-reduced-motion CSS media feature is part of the CSS Media Queries Level 5 specification. It detects whether the user has enabled a setting on their device to minimize the amount of non-essential motion.

Syntax and Values

The media feature accepts two values:

Browser Support

This feature is widely available (Baseline status) across all major browsers:

• Chrome: 74+
• Firefox: 63+
• Safari: 10.1+
• Edge: 79+
• iOS Safari: 10+
• Android Browser: 67+

As documented by MDN Web Docs' browser support data, this feature has achieved universal adoption across modern browsers.

Basic Implementation

/* Default: full animations for users without reduced motion preference */
.element {
 animation: pulse 1s ease-in-out infinite;
}

/* Override for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
 .element {
 animation: none;
 }
}

This CSS implementation pattern is a core component of modern web development best practices that prioritize user accessibility and inclusive design.

Complete Animation Override Pattern

For comprehensive coverage, use this pattern to disable all animations for users who prefer reduced motion:

/* Disable all animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
}

This pattern:

• Sets animation duration to nearly instant (0.01ms effectively means no visible animation)
• Limits iterations to once, preventing infinite loops
• Reduces transitions to instant state changes
• Disables smooth scrolling, which can trigger vestibular responses

WCAG Compliance: Animation from Interactions (2.3.3)

WCAG Success Criterion 2.3.3 Animation from Interactions is a Level AAA requirement that states:

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

Essential vs Non-Essential Animations

Essential animations (must be preserved):

• Loading indicators and progress feedback
• Form validation states
• Error and success state changes
• Critical user feedback that communicates important information

Non-essential animations (must respect reduced motion):

• Parallax scrolling effects
• Decorative transitions and reveals
• Auto-playing background videos
• Hover effects with movement
• Page transition animations

The official WCAG 2.3.3 success criterion documentation provides the authoritative definition and implementation guidance.

Sufficient Techniques

The W3C provides these sufficient techniques for compliance:

• C39: Using the CSS prefers-reduced-motion query to prevent motion
• SCR40: Using the CSS prefers-reduced-motion query in JavaScript to prevent motion
• Gx: Allowing users to set a preference that prevents animation

As outlined in the W3C WCAG Techniques C39 and SCR40 documentation, these approaches satisfy the success criterion requirements.

Achieving WCAG AAA compliance through proper accessibility implementation also positively impacts search engine optimization, as accessible websites provide better experiences for all users.

JavaScript Detection and Control

Beyond CSS, you can programmatically detect and respond to reduced motion preferences using JavaScript's window.matchMedia() API.

Programmatic Detection

// Detect reduced motion preference
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

// Check current preference
if (prefersReducedMotion.matches) {
 disableAnimations();
}

// Listen for changes in real-time
prefersReducedMotion.addEventListener('change', (event) => {
 if (event.matches) {
 disableAnimations();
 } else {
 enableAnimations();
 }
});

Controlling Third-Party Libraries

Many animation libraries support reduced motion natively:

// GSAP reduced motion configuration
gsap.defaults({
 defaults: {
 duration: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 0.5,
 ease: 'power2.out'
 }
});

Custom Site Toggle

Consider providing a site-level toggle for users who want granular control:

// Store preference in localStorage
function setAnimationPreference(reduceMotion) {
 localStorage.setItem('reduceMotion', reduceMotion ? 'true' : 'false');
 applyAnimationPreference();
}

This JavaScript implementation pattern demonstrates how programmatic accessibility features can be integrated into modern web development workflows to create truly inclusive experiences.

Testing and Debugging

Browser DevTools Simulation

Chrome/Edge: More tools > Sensors > Motion emulation > Reduced motion

Firefox: about:config (ui.prefersReducedMotion = 1) or DevTools > More tools > Rendering

Safari: Develop > Enter Responsive Design Mode

Testing Checklist

• Verify animations are disabled in reduced motion mode
• Confirm essential feedback remains functional
• Test across multiple pages and user flows
• Validate third-party components respect reduced motion
• Check JavaScript-driven animations are properly handled
• Test preference change during active session
• Verify no unintended animations remain

Common Issues

1. Third-party components: Widgets and embeds may have their own animations
2. CSS-in-JS libraries: Inline styles may override media query styles
3. JavaScript animations: Programmatic animations may run outside CSS control
4. Scroll-linked animations: Parallax effects need explicit handling

Sources

1. MDN Web Docs - prefers-reduced-motion
2. W3C WAI WCAG 2.3.3 - Animation from Interactions
3. web.dev - prefers-reduced-motion: Sometimes less movement is more
4. W3C CSS Media Queries Level 5 Specification
5. W3C WCAG Techniques C39 and SCR40