Reduced Motion

Reduced motion refers to both a user accessibility preference and the corresponding CSS media query (`prefers-reduced-motion`) that allows websites and applications to detect and respect that preference. When a user enables the reduced motion setting on their operating system, they are indicating that animations, transitions, and motion effects on screen cause them discomfort or pose a health risk, and they would prefer that these effects be minimized or eliminated. The `prefers-reduced-motion` CSS media query was introduced to give developers a straightforward way to honor this preference. When the query matches, developers can disable or substitute animations with static alternatives. The query has two values: `reduce` (the user prefers less motion) and `no-preference` (the user has not indicated a preference). The preference addresses real medical conditions. Vestibular disorders affect the inner ear and brain's ability to process motion signals, causing dizziness, nausea, and disorientation when exposed to visual motion. Conditions include benign paroxysmal positional vertigo (BPPV), Meniere's disease, vestibular neuritis, and labyrinthitis. Estimates suggest that vestibular dysfunction affects a significant percentage of adults, with prevalence increasing with age. Beyond vestibular disorders, excessive motion can trigger migraines, exacerbate seizure conditions (addressed by WCAG 2.3.1), and create distractions for people with attention-related disabilities. The reduced motion preference serves as a broad protective mechanism for all these populations.

Motion and animation have become pervasive in modern web design. Parallax scrolling, page transitions, animated loading states, hover animations, auto-playing carousels, and background video are common. While these effects can enhance the experience for some users, they create genuine accessibility barriers for others. **Health impact.** For people with vestibular disorders, encountering unexpected motion on a website can trigger a vestibular episode lasting minutes to hours. Symptoms include intense dizziness, nausea, visual disturbance, and difficulty concentrating. This is not a matter of preference or annoyance; it is a physiological reaction that can make web browsing genuinely harmful. **WCAG requirements.** WCAG addresses motion through several success criteria. Criterion 2.3.1 (Three Flashes or Below Threshold) prohibits content that flashes more than three times per second. Criterion 2.3.3 (Animation from Interactions) requires that motion animation triggered by interaction can be disabled unless the animation is essential. Respecting the `prefers-reduced-motion` preference is the most effective way to meet this criterion. **Legal relevance.** Accessibility lawsuits have cited excessive motion as a barrier. As WCAG 2.1 and 2.2 criteria are increasingly referenced in legal frameworks, failure to respect user motion preferences becomes a compliance gap. **User numbers.** Vestibular disorders are not rare. Studies indicate that roughly 35% of adults over 40 have experienced vestibular dysfunction. Motion sickness susceptibility is even more common. The population that benefits from reduced motion is substantial.

Implementing reduced motion support involves CSS, JavaScript, and design decisions: **CSS media query.** The core implementation uses the `prefers-reduced-motion` media query to conditionally remove or modify animations: ```css /* Default: animations are active */ .hero-section { animation: slideIn 0.5s ease-out; } /* Reduced motion: remove or replace animation */ @media (prefers-reduced-motion: reduce) { .hero-section { animation: none; } } ``` A common pattern is to define a global rule that removes transitions and animations: ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } ``` **JavaScript detection.** For animations controlled by JavaScript (such as those using GSAP, Framer Motion, or requestAnimationFrame), check the media query in JavaScript: ```javascript const prefersReducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ); if (prefersReducedMotion.matches) { // Disable or simplify animations } ``` **Design-level decisions.** Not all motion needs to be removed. The goal is to eliminate motion that could cause vestibular distress. Problematic motion types include parallax scrolling effects, large elements moving across the screen, zoom or scaling transitions, spinning or rotating elements, auto-playing video or animated backgrounds, and continuous looping animations. Generally safe alternatives include simple opacity fades, instant state changes with no transition, and small-scale color shifts. **Replace rather than remove.** When possible, replace animations with static alternatives rather than simply removing them. If a page transition normally slides content in from the side, replace it with a fade or an instant cut when reduced motion is active. This preserves the sense of state change without the problematic motion. **Auto-playing media.** Video backgrounds and auto-playing animations should be paused or hidden when reduced motion is preferred. Provide play controls so users can choose to view motion content when they are prepared. **Scroll-linked animations.** Parallax effects and scroll-driven animations are particularly problematic because they create a disconnect between the user's scroll action and the visual response. In reduced motion mode, elements should scroll normally with the page without parallax offsets. **Testing.** Enable reduced motion in your operating system settings and verify that your website removes or minimizes problematic animations. Check that content is still fully accessible and understandable without animation. Verify that transitions that convey state changes (such as a menu opening) still communicate the change, even if through a non-motion alternative.