How to Make Your Website More Accessible with prefers-reduced-motion

Introduction:

If you're building websites or web applications, it's important to make sure that everyone can use them, regardless of any accessibility challenges they may face. One accessibility issue that can affect some users is motion sickness or discomfort caused by animations and other motion effects on the page. That's where prefers-reduced-motion comes in.

Understanding prefers-reduced-motion

prefers-reduced-motion is a media query that can be used in CSS to detect whether the user has requested reduced motion on their device or browser. The possible values for prefers-reduced-motion are no-preference and reduce. If the user has requested reduced motion, any animations or other motion effects on the page should be disabled or scaled back.

Here's an example of how to use prefers-reduced-motion in CSS:

@media (prefers-reduced-motion) {
  /* Disable or scale back animations and motion effects */
}

Examples of prefers-reduced-motion in action

Here are some examples of how you can use prefers-reduced-motion to create a more accessible user experience:

• If you have a slideshow or carousel on your page, you can disable automatic animation when prefers-reduced-motion is set to reduce, so that the user can manually advance the slides without being bombarded with automatic motion effects.

• If you have a navigation menu that slides in and out of view, you can disable the sliding animation when prefers-reduced-motion is set to reduce, so that the menu appears instantly without any motion effects.

• If you have a hover effect on your links or buttons, you can disable the effect or change it to a more subtle effect when prefers-reduced-motion is set to reduce, so that the user doesn't experience any sudden or distracting motion.

prefers-reduced-motion demo

You can see the smooth scroll animation if you operating system's Animation is enabled.
If you disable the operating system's Animation, smooth scrolling will no longer visible

Enable Disable Animation in Windows

Conclusion:

By using prefers-reduced-motion in your CSS, you can make your website or web application more inclusive and accessible to users who may experience discomfort or motion sickness from animations and other motion effects. It's a simple but powerful tool that can help you create a more welcoming and inclusive online experience.

Follow me on

Twitter
Github
LinkedIn