reducedmotion

Reduced motion is a user preference that indicates a request to minimize or eliminate motion content in interface design. It is intended to help people who experience discomfort, dizziness, vertigo, or vestibular disorders caused by animated content, as well as users who experience cognitive or attention challenges triggered by motion. The concept is widely recognized in web and software accessibility practices and is supported by the Web Content Accessibility Guidelines (WCAG) as a technique to reduce non-essential motion.

In practice, reduced motion is implemented through a user preference known as prefers-reduced-motion in CSS, and similarly in application frameworks and operating systems. When the preference is set to reduce, sites and apps can simplify or pause animations, transitions, and parallax effects, and avoid auto-playing or rotating content. This can also involve reducing animation duration, easing, and other motion that could cause discomfort, while preserving essential content functionality.

Developers are encouraged to respect the preference by guarding animation logic with media queries such as @media (prefers-reduced-motion: reduce) and providing alternatives for essential interactions that would otherwise rely on motion.

Support and adoption: Modern web browsers such as Chrome, Firefox, Safari, and Edge support prefers-reduced-motion. Many mobile operating systems also expose a system-wide Reduced Motion setting. The concept is a standard accessibility best practice to improve usability for users sensitive to motion, without requiring separate versions of content.