Change `prefers-reduced-motion` setting in browsers?

Programming
, , ,
1

Testing prefers-reduced-motion

The prefers-reduced-motion media query in CSS allows developers to tailor a site’s experience for users who have enabled the setting in their browser or Operating System.

Testing a website or application to ensure that prefers-reduced-motion works correctly can be done by:

  • Checking browser settings
  • Checking Operating System settings

Checking Browser Settings

Depending on the browser, the setting may be found in the following locations:

  • Chrome: Settings > Advanced > Accessibility > Prevent animations and motion
  • Firefox: Preferences > Content > Enable accessibility features > Reduce motion
  • Safari: Preferences > Advanced > Accessibility > Reduce motion

Checking Operating System Settings

  • macOS: System Preferences > Accessibility > Display > Reduce motion
  • Windows: Settings > Ease of Access > Display > Simplify and personalize Windows > Simplify and personalize Windows > Reduce the amount of animation
2

To test prefers-reduced-motion in CSS, you can follow these steps:

  1. Check the browser settings:

    • Chrome: Go to Settings > Advanced > Accessibility > Prevent animations and motion.
    • Firefox: Go to Preferences > Content > Enable accessibility features > Reduce motion.
    • Safari: Go to Preferences > Advanced > Accessibility > Reduce motion.

  2. Check the operating system settings:

    • macOS: Go to System Preferences > Accessibility > Display > Reduce motion.
    • Windows: Go to Settings > Ease of Access > Display > Simplify and personalize Windows > Simplify and personalize Windows > Reduce the amount of animation.