Prefers Reduced Motion

[00:00:00]
>> These are like some of my absolute favorite API's. They're so cool. So at a very high-level rolling in talk about two of them today, but there are all these APIs in webinar that start with prefers and what they're doing is they're giving you access to specific system information.

[00:00:18]
So operating system level information. So you have a disability, you get a new laptop, then you set it up for accessibility. So you say, hey, in this example like the question, I suffer from seizures. I wanna make sure that I select the reduced motion option inside accessibility. So that means that like a lot of the cool Mac effects will just skip and they'll just go either very slow or just instant.

[00:00:42]
So not a lot of flashing. We've had that for years in the system level. What we haven't had as any way to engage with those API's on the web. And so now, we have these ways like this prefers reduced motion. I'll come back to this WebAIM, but I just wanna show an example.

[00:00:57]
So let's say we start with a div and we give it a class of animation, and we put the word animated box in it. And then with CSS, we do something like this. We say, okay, that class Should have a pulsing animation every second. What you can now do as a media query is you can say, if the user prefers reduced motion, then instead of that fancy pulsating animation just do a nice simple dissolve animation.

[00:01:23]
And what this looks like is this demo here. So you see this box is like pulsating. I go into my preferences accessibility display and I click reduce motion. That's where my whole system. And as soon as I click on reduce motion, the web instantly updates. So we'll see I go into system [references, accessibility, display as soon as I click it.

[00:01:43]
The thing stops and switches over to a nice dissolve animation. So you can really build as many things as you want with a nice animation as long as you put a media query under it that says, okay, if they prefer reduce motion do this instead whether it's nothing or a lighter animation is totally great.

[00:02:02]
So this is a very, very cool and it allows us to do things that normally would be rightfully criticized as being even potentially dangerous. Like the question mentioned, what if people have seizures that we can now do very comfortably, because we know that anybody that has accessibility settings turned on we'll get this much better experience.

[00:02:22]
So yeah, back to WebAIM on that one. They say, no page content flashes more than three times per second, unless it's really small and then they have guidelines on what really small means. But to be a Triple A compliant, no page content flashes more than three times per second.

[00:02:38]
So the only takeaways here would be three times per second is a really good rule to just follow, just not do it more than that. Even if you're slower than that and you have the time offering some kind of prefers reduced motion even if you just simply have no animation can be a really nice experience.