At the beginning of my career as developer, I came across accessibility and which impact can have a nice accessible website to users with disabilities. There will be another article with some experiences I made as I got in touch with a11y.

Some times ago I read about a media feature, where we can let the user decide a bit, which animations - or even - how fast the animations run.

This media query is called 'prefers-reduced-animation', which you can pass 1 of these options:

1. no-preference
2. reduced

Given this value, you can reduce/disable your animations or just let it as it already is.

So let's say, you have a bit of a flashing effect on your side. To some people this can cause some dizziness, sickness and many other unease.

Here's a short codepen, but I'm pretty sure, you know, what I mean:

I just want to mention here, that it's always good, to 'warn' people, if you have some heavily flickering - or something else - on your page. Because of that, I want you to start the animation in the codepen by clicking on the 'start animation' button.

With usage of the media feature 'prefers-reduced-motion' we can now determine, how our animation is running on the client's computer.

Disable animation

@media (prefers-reduced-motion: reduce) { 
 .pulsateCircle { 
  animation: none;
 }
}

Slow down animation

If you increase the duration of the animation, the animation will slow down. This could still bring a nice effect to side and the users are not that much or even no more impacted by your great animations. Maybe there's a good way to define between no animation, an animation which fits for users with disabilities and fast animations.

@media (prefers-reduced-motion: reduce) { 
 .pulsateCircle { 
  animation-duration: 2000ms;
 }
}

Emulate and test prefers-reduced-motion in Chrome

In Chrome you have the possibility to test, if your implementation of your media feature works inside your Dev Tools in the Rendering Tab.

What's with the browser compability?

So..yeah.. almost every new browser supports this media feature, which is great to see. prefers-reduced-motion on caniuse

And... that's it. I hope you liked it and I could give you a short insight into this media feature. Thank you for reading my (first) article. I'd be very glad if you leave a comment with some suggestions or some feedback. :)