Reduced Motion

Reduced motion is an accessibility setting that allows users to disable or minimise animations, transitions, and parallax effects in software. The CSS prefers-reduced-motion media query lets websites detect this preference and serve static alternatives. Excessive motion can cause disorientation for users with vestibular disorders and trigger seizures. WCAG requires that moving content can be paused, stopped, or hidden.

Category: Accessibility (also: Front End, UX)

Author: Atomic Glue Team

## Definition

Reduced motion refers to the accessibility preference for minimising or eliminating moving, blinking, scrolling, or auto-updating content. Many users with vestibular disorders (inner ear balance conditions) experience dizziness, nausea, or disorientation when exposed to parallax scrolling, zoom animations, slide transitions, or any non-essential motion. Users with seizure disorders (photosensitive epilepsy) can be triggered by flashing or strobing effects. The CSS media query prefers-reduced-motion: reduce lets websites detect the user's system-level motion preference (set in macOS Accessibility, Windows Ease of Access, iOS Accessibility, or Android Accessibility) and serve reduced-motion alternatives. At the WCAG level, 2.2.1 Timing Adjustable (Level A) covers time limits, 2.2.2 Pause, Stop, Hide (Level A) covers moving and auto-updating content, and 2.3.1 Three Flashes or Below Threshold (Level A) covers seizure triggers. The prefers-reduced-motion query is not itself a WCAG requirement, but using it is the best practice for respecting user preferences at the system level.

## Who benefits from reduced motion

Vestibular disorder affects an estimated 35 percent of US adults over 40. Symptoms include vertigo, dizziness, and nausea triggered by perceived motion. Parallax scrolling, zoom-in transitions, scaled animations, and persistent background motion can trigger these symptoms. Users with attention deficit disorders may also find excessive motion distracting and counterproductive. Additionally, users running low-power devices or limited data connections benefit from fewer and lighter animations. Reduced motion is not about removing all delight from a design. It is about offering a comfortable, non-triggering experience for users who cannot tolerate motion.

## How to implement reduced motion with CSS

The prefers-reduced-motion media query evaluates to no-preference (user has no preference) or reduce (user has requested minimal motion). Wrap all non-essential animations and transitions in a query that checks for no-preference, and provide a static fallback within reduce. Critical animations (loading spinners, progress bars, focus indicators) can be kept but should be simplified. JavaScript-based animations should also check the preference using window.matchMedia('(prefers-reduced-motion: reduce)'). Do not use the query to remove all animations, only non-essential ones. A fade transition is likely fine even in reduced mode; a 3D flip zoom is not.

## In code

/* Animation only when the user has not requested reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card:hover {
    transform: translateY(-4px);
  }
}

/* Essential animation always works; simplified for reduced motion */
.spinner {
  animation: spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2s; /* Slower, less jarring */
  }
  .parallax-bg {
    transform: none !important; /* Disable parallax */
  }
}

## Common questions

Q: Will removing animations make my site look boring?

A: No. Good reduced motion design is not a flat, static page. It uses subtle transitions, colour, layout, and typography to create visual interest without relying on movement. Many of the best-designed sites work beautifully with motion disabled.

Q: Does prefers-reduced-motion cover all motion?

A: It covers all CSS animations and transitions that are wrapped in the media query. JavaScript animations must check the same preference programmatically. Video autoplay, GIF autoplay, and canvas animations are not directly controlled by the query and must be handled separately.

## Key takeaways

• prefers-reduced-motion lets websites detect and respect the user's motion preference.
• Excessive motion triggers vestibular symptoms (dizziness, nausea) in millions of users.
• Wrap non-essential animations in prefers-reduced-motion: no-preference.
• WCAG requires moving content to be pausable, stoptable, or hideable.
• Reduced motion does not mean no visual design. It means no unnecessary movement.

## Related entries

• [High Contrast Mode](atomicglue.co/glossary/high-contrast-mode)
• [Accessibility (a11y)](atomicglue.co/glossary/accessibility)
• [Inclusive Design](atomicglue.co/glossary/inclusive-design)

Last updated July 2026. Permalink: atomicglue.co/glossary/reduced-motion