patterncssMajor

prefers-reduced-motion for accessible animations

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

prefers-reduced-motionaccessibilityanimationvestibularWCAGmotion

Problem

CSS animations and transitions cause motion sickness or discomfort for users with vestibular disorders. There is no fallback for users who have enabled reduced motion in their OS settings.

Solution

Use the prefers-reduced-motion media query to disable or tone down animations:

/* Base animations */
.button {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Reduce or remove motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: box-shadow 0.1s ease; /* keep subtle visual feedback */
  }

  .button:hover {
    transform: none; /* remove the movement */
  }

  /* Global approach: remove all transitions and animations */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Why

The prefers-reduced-motion media query reflects the user's OS-level 'Reduce Motion' setting. Respecting it is a WCAG 2.1 criterion (2.3.3 Animation from Interactions) and improves accessibility for millions of users.

Gotchas

Do not completely remove all visual feedback — non-moving transitions like opacity or color changes are usually acceptable.
Auto-playing videos should also be paused when prefers-reduced-motion: reduce is active.
The no-preference value does not mean the user wants animations — it means they haven't expressed a preference.
JavaScript: window.matchMedia('(prefers-reduced-motion: reduce)') allows you to respect this in animations driven by JS.

Context

Any website with CSS animations, transitions, or scroll effects.

Revisions (0)

No revisions yet.