Reduced Motion

Problem

Users with motion sensitivity experience nausea or dizziness from animations. Parallax scrolling or auto-playing animations can make interfaces completely unusable for people with vestibular disorders. Users have set a system preference to reduce motion, but websites ignore it, causing physical discomfort.

Solution

Respect user preferences for reduced motion by disabling or simplifying animations. This accommodates users with vestibular disorders who find motion uncomfortable or disorienting.

Example

This example demonstrates using CSS to respect the user’s operating system preference for reduced motion, dramatically simplifying or removing animations.

/* When user has reduced motion preference enabled */
@media (prefers-reduced-motion: reduce) {
  * {
    /* Make animations nearly instant instead of completely removing them */
    animation-duration: 0.01ms !important;
    /* Only run animations once, not repeatedly */
    animation-iteration-count: 1 !important;
    /* Make transitions instant for reduced motion */
    transition-duration: 0.01ms !important;
  }
}

Benefits

• Makes interfaces usable for people with motion sensitivity or vestibular disorders.
• Respects user preferences set at the operating system level.
• Improves accessibility without removing functionality.
• Often improves perceived performance by reducing animation overhead.

Tradeoffs

• Requires testing interfaces without motion to ensure they still work well.
• May remove visual polish that helps convey state transitions.
• Needs careful implementation to maintain usability without motion cues.
• Can make subtle animations that aid understanding completely disappear.