Let’s talk a bit about the reduced motion query. It’s an up-and-coming feature that is going to have a big impact on our ability to create accessible animation in the near future.
Not all animation has the potential to be harmful, so this isn’t something you’ll have to use for every animation you create. But, it will be very helpful for intentionally creating safer experiences for motion-sensitive folks when bigger or more drastic motion is called for in a design. That’s why I think it’s such a useful thing to keep an eye on.
How it works
In a nutshell, it’s a user query and it’s the web’s implementation of a Reduce Motion setting. It uses an @media block to check if the viewer has indicated a preference for reduced motion. (This preference can also be accessed via JavaScript using window.matchMedia too.)
Essentially, we can tone down or remove motion that may be harmful for those with vestibular disorders or motion-sensitivities like this:
@media (prefers-reduced-motion: reduce) {
// adjust potentially harmful animations to be paused or less drastic here
}
See this CSS-Tricks article’s comments for more syntax options.
There isn’t an option to intentionally opt in to all levels of motion, so a value of “no-preference” could mean all motion is ok, or that no preference has been indicated yet. This makes it tricky to make assumptions about any value besides “reduce” or to implement a progressive enhancement approach (i.e. only serving up the extended motion to those who have indicated they want it).
See it in action
Viljami’s site is one example of the reduced motion query in action on a full web site. View it in Safari on iOS or macOS Sierra with the reduce motion setting turned on to see the reduced motion version. For more direct examples where you can dig into the code more easily, this Pen from Eric Bailey and this demo page from the Webkit blog are useful examples too.
Current support
We’re just beginning to see the reduced motion query be implemented. It’s only in Safari right now, but it’s expected that other browsers will follow suit soon as User Queries are being adopted. Also, at this time, only iOS and macOS provide end users a way to set their preference. I expect this will change as it’s adopted by more browsers.
More resources
For more on how to use it and why it’s needed, check out:
- This detailed rundown on CSS-Tricks
- The Web Kit Blog on Safari’s implementation and more
- My ALA article on animation for motion sensitivity
I highly recommend reading up on how to use it and when it’s most useful. As it gains more support it will be a very useful tool for accessibility.
Also – if you’re curious about the wider impact of animation on accessibility, I have a whole chapter on that in Designing Interface Animation.
This article was written for the UI Animation Newsletter. Subscribe to get weekly web animation tips and resources straight to your inbox!
