Accessible Animation

Problem

Animations trigger nausea, dizziness, or vestibular issues for users with motion sensitivity. Rapid movements, parallax scrolling, or auto-playing animations can cause physical discomfort or make interfaces completely unusable for people with vestibular disorders.

Solution

Respect the prefers-reduced-motion media query to disable or simplify animations for users who need it. When motion is safe, use gentle easing functions and reasonable durations to avoid jarring movements that can trigger vestibular issues.

Example

This example shows how to create smooth animations for most users while disabling them for those who have indicated a preference for reduced motion in their system settings.

/* Default: enable smooth transform animation */
.card {
  transition: transform 0.3s ease-out;
}

/* Respect user preference to reduce motion */
@media (prefers-reduced-motion: reduce) {
  .card {
    /* Disable all transitions for users sensitive to motion */
    transition: none;
  }
}

Benefits

• Prevents motion sickness, dizziness, and vestibular issues for sensitive users.
• Simple to implement with native CSS media queries and broad browser support.
• Respects user preferences set at the operating system level.
• Improves usability for users with attention disorders or cognitive disabilities.
• Can improve perceived performance by removing unnecessary animations.

Tradeoffs

• Reduces visual polish and delight for users who have motion enabled.
• Requires careful design decisions about what should happen instead of animation.
• May need alternative ways to communicate state changes without motion.
• Testing requires manually enabling the reduced motion preference.
• Some design systems rely heavily on motion for feedback and affordance.