Accessible animations – a practical guide for designers and developers

By Anne-Mieke Bovelett on January 12, 2025
Status: up to date

Accessibility isn’t about removing features. It’s about making them available to everyone in a way that works for them.

Think of animations like seasoning in cooking – while they can make an experience more flavorful, not everyone can tolerate strong spices. When users request reduced motion via their system settings, they’re essentially asking for a milder version of your dish, not removing the seasoning entirely.

Although the gold standard is to fully respect prefers-reduced-motion by stopping animations, I understand that sometimes animations are deeply woven into your design vision (or that of your customer). In these cases, consider toning down the intensity rather than removing them completely when this setting is active. Think of it as adjusting the spice level to make your dish enjoyable for more people. Small, subtle movements can still convey the same message while being more comfortable for users who experience motion sensitivity.

Remember: Good design isn’t about sacrificing creativity – it’s about making your creative vision accessible to everyone. Your subtle animations might end up being even more elegant than the original ones!

The reduced motion system setting

People can set reduced motion as a preference on their operating system. The reduced motion setting on computers and browsers is an accessibility feature designed to accommodate people who experience discomfort or difficulty with animated content, such as those with vestibular disorders, motion sensitivity, or other related conditions.

When it’s enabled, this setting signals the system or website to minimize or eliminate animations, transitions, and other motion effects. Instead, users (should) experience simplified visual feedback, such as fading effects or static displays. The reduced motion preference is usually set at the operating system level and is detected by compliant websites and applications through the prefers-reduced-motion media query. You will find an example of that further down in this article. This ensures a smoother, more comfortable experience for users by tailoring the visual presentation to their needs.

However, when your code does not respect that setting at all, you are giving them a much undesired experience. This can cause a visitor to simply leave your site, or close your app to never revisit again.

People typically set reduced motion preferences in common situations:

1. Vestibular Disorders and Motion Sensitivity

• People with inner ear disorders (vestibular conditions) can experience dizziness, nausea, or migraines from animated content
• Think of it like being carsick – some people can read in a moving car, while others get nauseous from that same motion
• Even subtle animations like parallax scrolling or zoom effects can trigger these symptoms

2. Cognitive Processing Needs

• People with ADHD might find animations distracting when trying to focus on content.
• People with autism might find excessive motion overwhelming to process.
• Some users simply process information better without motion, similar to how some people prefer to study in a quiet room versus one with lots of activity.

3. Visual Processing Considerations

• Users with certain types of visual processing disorders can find it difficult to track moving elements.
• Some people experience visual snow syndrome, where animation can make it harder to distinguish content.
• It’s like trying to read text on a shaking phone screen – technically possible, but much harder than when it’s still.

4. Personal Comfort and Preference

• Some people simply find excessive animation tiring.
• Battery preservation and/or reduced data usage, since animations can consume more resources on mobile devices.

5. Temporary Situations

• During periods of migraine or headache.
• When experiencing eye strain or fatigue.
• While using devices in moving vehicles.
• When working in low-light conditions where motion can be more disorienting.

Implementation best practices

1. CSS Implementation

Always provide both the standard animation and a reduced-motion alternative:

.animation {
  /* Standard animation */
  transition: opacity 1s ease-in-out;
  animation: fadeIn 1s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    /* Disable animations and transitions */
    transition: none;
    animation: none;

    /* Provide alternative feedback if needed */
    outline: 2px solid currentColor;
  }
}

/* Define your animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

2. JavaScript implementation

For JavaScript-driven animations, implement a preference listener that responds to changes:

// Create media query for reduced motion preference
const motionMediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');

// Handler function for motion preference
function handleMotionPreference(event) {
  const elements = document.querySelectorAll('.animation');
  elements.forEach(element => {
    element.style.animation = event.matches ? 'none' : 'fadeIn 1s ease-in-out';

    // Add alternative feedback if needed
    if (event.matches) {
      element.classList.add('alternative-feedback');
    } else {
      element.classList.remove('alternative-feedback');
    }
  });
}

// Check initial preference
handleMotionPreference(motionMediaQuery);

// Listen for preference changes
motionMediaQuery.addEventListener('change', handleMotionPreference);

Alternative feedback methods

When disabling animations, ensure any important information they conveyed is still accessible through other means:

1. Visual Indicators

• Use color changes (with sufficient contrast).
• Add borders or outlines.
• Implement static icons.
• Display text labels.

1. State Changes

• Use ARIA attributes to announce changes.
• Implement focus states.
• Provide clear visual feedback.

Testing Recommendations

Always test your implementation across different scenarios:

Operating System Settings

• In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
• In Windows 11: Settings > Accessibility > Visual Effects > Animation Effects.
• In macOS: System Preferences > Accessibility > Display > Reduce motion.
• In iOS: Settings > Accessibility > Motion.
• In Android 9+: Settings > Accessibility > Remove animations.
• In Plasma/KDE: System Settings > Workspace Behavior -> General Behavior > “Animation speed” is set all the way to right to “Instant”.

Browser testing

• Use developer tools to toggle prefers-reduced-motion.
• Verify all interactive elements work without animation

Device testing

• Test on mobile devices
• Verify functionality on different browsers
• Check performance impact

Common Pitfalls to Avoid

1. Don’t rely solely on animation to convey important information.
2. Avoid removing essential functionality when disabling animations.
3. Remember to handle both transitions and animations.
4. Don’t forget to clean up event listeners when components unmount.
5. Ensure alternative feedback is equally noticeable.

Additional Resources

• WCAG 2.1 Success Criterion 2.3.3: Animation from Interactions
• MDN Web Docs: prefers-reduced-motion
• A11Y Collective: Accessible Animation