No Login Data Private Local Save

prefers‑reduced‑motion Tester - Online A11y Check

22
0
0
0

prefers-reduced-motion Tester

Detect your system's motion preference and preview how animations behave under prefers-reduced-motion: reduce

Live Detection

Standard Motion Detected

Your system reports no-preference — full animations are applied.

no-preference
This tool uses window.matchMedia('(prefers-reduced-motion: reduce)') to detect your OS-level accessibility setting. Changes are monitored in real-time.
Animation Preview
Following System
Bounce
Spin
Pulse
Shake

These elements animate with standard motion. Toggle the Simulate Reduced switch above to preview the accessible alternative.

CSS Media Query
/* Standard animations */ .my-element { animation: slideIn 0.5s ease; } @media (prefers-reduced-motion: reduce) { .my-element { animation: none; transition: opacity 0.3s ease; opacity: 1; } }
JavaScript Detection
const mq = window.matchMedia( '(prefers-reduced-motion: reduce)' ); if (mq.matches) { // Disable animations disableAnimations(); } // Listen for changes mq.addEventListener('change', (e) => { if (e.matches) { disableAnimations(); } else { enableAnimations(); } });
WCAG 2.2 — SC 2.3.3 Vestibular Disorder Friendly Chrome 74+ · Firefox 63+ · Safari 10.1+ iOS · Android · macOS · Windows
Frequently Asked Questions

prefers-reduced-motion is a CSS media feature that detects whether the user has enabled a "reduce motion" setting in their operating system or browser. When set to reduce, it signals that the user prefers minimal or no animation. This is critical for accessibility — users with vestibular disorders, motion sensitivity, or cognitive conditions can experience dizziness, nausea, or disorientation from excessive animations. Respecting this preference is part of WCAG 2.2 Success Criterion 2.3.3 (Animation from Interactions) and demonstrates inclusive design practices.

Use the @media (prefers-reduced-motion: reduce) media query to override animations. For example, set animation: none and transition: none (or use subtle opacity transitions). You can also reduce animation duration, disable parallax effects, and replace motion-heavy interactions with simple fades. A best practice is to define all animations inside a media query for no-preference so that reduced motion is the safer default.

Use window.matchMedia('(prefers-reduced-motion: reduce)'). Check the .matches property for the current state, and attach a change event listener to respond dynamically when the user toggles the setting. This is useful for JavaScript-driven animations, libraries like GSAP or Framer Motion, and for programmatically disabling video autoplay or carousels.

It is widely supported: Chrome 74+, Firefox 63+, Safari 10.1+ (including iOS Safari), Edge 79+, and Samsung Internet. On the OS level, users can enable "Reduce motion" in macOS (System Preferences → Accessibility → Display), iOS (Settings → Accessibility → Motion), Windows (Settings → Ease of Access → Display), and Android (Settings → Accessibility → Remove animations). Global support exceeds 95% of web users.

Focus on disabling: large-scale motion (parallax, background videos), rapid闪烁 (flashing or strobing), infinite loops (spinners aside from essential loading indicators), auto-scrolling carousels, bounce and elastic easing, and animated page transitions. Keep essential micro-interactions (hover states, focus rings) but make them instantaneous or use simple opacity changes. The goal is not to eliminate all visual feedback — just motion that could trigger discomfort.

You have several options: (1) Use the Simulate Reduced toggle on this page to preview the effect in the demo arena. (2) Open Chrome DevTools → Rendering tab → enable "Emulate CSS media feature prefers-reduced-motion" and select "reduce". (3) Firefox DevTools has a similar option under the Accessibility panel. (4) Use browser extensions that toggle the flag. These methods let you test without affecting your entire OS experience.

While prefers-reduced-motion itself is not a direct ranking factor, it indirectly supports SEO by improving user experience and accessibility — both of which Google values. Pages that respect user preferences tend to have lower bounce rates and higher engagement. Additionally, heavy animations can negatively impact Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP), two Core Web Vitals metrics. Reducing unnecessary motion can improve performance scores, especially on lower-end devices.

Yes, and this is a smart strategy. Checking prefers-reduced-motion: reduce can be a signal to skip heavy animation workloads, reduce GPU usage, and serve lighter experiences. However, don't rely on it as the sole performance optimization — many users who would benefit from reduced motion (e.g., on low-power devices) may not have the setting enabled. Combine it with device memory APIs, battery status, or network conditions for a comprehensive adaptive loading strategy.

prefers-reduced-motion targets accessibility and comfort — it reduces or disables animations for users with motion sensitivity. prefers-reduced-data (experimental) targets bandwidth conservation — users on metered connections may prefer lighter assets, fewer videos, and compressed images. Both are user preference media queries, but they serve different purposes. A well-designed site respects both: reduce motion for accessibility, and reduce data for performance-conscious users.

Tailwind CSS provides the motion-reduce and motion-safe utility classes out of the box. Framer Motion (React) has a useReducedMotion() hook. GSAP allows checking the media query before creating tweens. Bootstrap 5 uses prefers-reduced-motion in its core to conditionally disable transitions. Most modern animation libraries now include built-in support — always check the docs for accessibility options before implementing custom animation solutions.
🔧 Related Tools