Hello, my name is: Amy

This Week I Learned: 'prefers-reduced-motion'

In doing some research on responsible ways to show an autoplay background video, I ran across something new and interesting, which is a way to handle things differently for people who have specfically said that they prefer less motion.

Something like this:

Reduced Motion setting on iPhone is availbale in Accessibility Settings

So, the theory being that (if there is something that isn't essential to the experience) if a user has selected a motion preference then when they come to a site with a video autoplaying (for example) their experience would have the video paused to start.

It seems that setting a 'motion preference' might only be available to do in iOS as of Safari 10.1. Still, it wouldn't hurt anything to have this set (either in CSS or in JavaScript)

@media (prefers-reduced-motion) {
  .spinny-thing {
     animation: none;
  }
}
if (window.matchMedia('(prefers-reduced-motion)').matches) {
  vid.removeAttribute("autoplay");
  vid.pause();
}

It also appears, though it is totally unclear and a little tough to follow the massive thread I was reading, that there might also be some ways of setting preferences, or grades of motion. Such as: prefers-reduced-motion: reduce | no-preference

Perhaps I'll give it a bit for dust to settle, and look into this some more.

Links of note:

Comments