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.
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.
Top comments (0)