Reduced Motion

Motion in interfaces can range from subtle transitions to large-scale parallax and animation. For users with vestibular disorders, that motion can cause dizziness, nausea, and disorientation severe enough to make an interface unusable.

The vestibular system

The vestibular system in the inner ear controls balance and spatial orientation. Vestibular disorders — including labyrinthitis, Ménière’s disease, and post-concussion syndrome — cause users to experience visual motion as physical motion. Scrolling animations, parallax effects, auto-playing carousels, and page transitions can all trigger responses ranging from discomfort to vertigo. This is not a rare condition — vestibular disorders affect a significant portion of people over 40, and are common across all age groups following illness or injury.

The prefers-reduced-motion media query

The prefers-reduced-motion CSS media query reflects the user’s operating system setting for reduced motion. When set, it signals that the user has requested a reduced-motion experience. The correct response is to remove, replace, or significantly reduce all non-essential animation. Transitions that communicate state — an element appearing or disappearing — can be reduced to an immediate change or an opacity fade. Decorative motion — background animations, scroll effects, parallax — should be removed entirely.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

What counts as non-essential

Any animation that exists for decoration or polish is non-essential. State-change animations that help users understand what just happened — a modal fading in, a toast notification appearing — can be preserved as simple fades or instant transitions. Animations that communicate meaning (a loading spinner, a progress bar) should be simplified rather than removed.

What is safe to keep

Not all animation triggers vestibular symptoms. The vestibular system is sensitive to spatial motion — translation, rotation, scaling, and parallax. Opacity and colour transitions do not move anything spatially and are generally safe to keep under reduced motion. A button changing colour on hover, an element fading in from opacity 0, a background shifting colour — these can remain. If your reduced-motion reset strips all transitions, consider restoring fades explicitly:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Safe to restore: opacity transitions don't move anything */
  .fade-in {
    transition-duration: 200ms !important;
  }
}

How to test

Enable reduced motion at the OS level: on macOS, System Settings → Accessibility → Display → Reduce Motion; on Windows, Settings → Accessibility → Visual Effects → turn off Animation Effects. On iOS, Settings → Accessibility → Motion → Reduce Motion. Then verify every animation in your interface responds correctly. In Chrome and Firefox DevTools, the Rendering panel includes a “Emulate CSS media feature prefers-reduced-motion” option for testing without changing system settings — useful during development.

The autoplay problem

WCAG 2.3.3 requires that any animation triggered automatically and lasting more than 5 seconds can be paused, stopped, or hidden by the user. Auto-playing hero videos, looping background animations, and scrolling marquees all fall under this criterion. Provide a pause control — or do not autoplay.

The takeaway

Add prefers-reduced-motion handling to every animation in your interface. It takes minutes to implement correctly and makes the interface usable for people who would otherwise be unable to interact with it at all.

Motion and reduced motion are a named conflict in the Conflict Matrix — including the specific failure mode of treating the static experience as a degraded fallback rather than the complete baseline.