Prefers Reduced Motion: Designing Safer Animation for Motion Sensitivities

(bright upbeat music) - Good morning, good afternoon, good whatever time of day it is for you right now, I'm so glad you're joining me here on the internet, for this remote version of code.

In this talk, we're going to be talking about animation and accessibility, which are two things that don't often get talked about together, but there's actually a lot of really interesting things to dig into here.

Specifically, we're going to be talking about, the when and how of reduced motion, of when to provide reduced motion, and the why of providing reduced motion as well. It's something that the technology around this, and our ability to do it have changed a lot, over the last year and a half or so, so, this is a great time to be digging into all of this. So, probably the first question that comes up in people's minds, and we start talking about this idea of reduced motion, and creating a reduced motion mode, is the sort of like, well, what are motion sensitivities? We often say that we need to create reduced motion for folks with motion sensitivities, but like, what does that mean? And essentially what it means, is that over the last few years, we've come to realise that, we as an industry, people who make interfaces and stuff on screens, certain kinds of motion on screen can cause people physical, can cause physical symptoms in people, and physical responses in people.

And that can happen even if that screen is as small as say, an iPhone screen.

So, this is something that, maybe in the past, we all assume was just for people that designed games, or something like that, but it definitely is something, that impacts our work as well.

I think it's really helpful to hear or read, some first person accounts of what it means for some of our motion sensitivity, to encounter motion that is problematic for them. Eileen Webb, has this great article, called, Your Interactive Makes Me Sick, that talks about her first person account of dealing with high levels of motion and her migraines, so that's a great read there, there's also this article from A List Apart, of a little while back, where the author talks about his experience, having a temporary vestibular disorder due to an injury, and I think it's a super interesting read, for a couple of reasons, one, because his vestibular disorder, which was the root of his motion sensitivity, was something that came about temporarily, and well, suddenly it wasn't a thing he's had all his life. And the second is that he talks about some things that maybe you wouldn't expect that were problematic for him.

He encountered issues with things that weren't motion. He talks about certain types of colours and diagonal lines and stuff that were also an issue.

And I think it helps to highlight that vestibular disorders impact people in a variety of way.

There's a whole range of experiences that could happen, and a whole range of things that might be triggering for folks and a whole range of symptoms that they might experience because of that. Some people might be triggered by motion on screen, others might not, and they might all or both have vestibular disorders. So it's kind of a, it's a large umbrella, of things that fall under that category, and variety of experiences that people have with that. So, I wanted to point this out early on, 'cause sometimes there's a little confusion with this, but before we get too far, I wanna point out that this talk is not about like, why not to use motion or telling you that motion is bad, because I don't believe that either of those things are true.

I've done a lot of writing of books and articles and talks in the past on how animation can support UX, and that is all still absolutely true, there's a lot we can do with animation, to positively impact UX, the overall experience, even accessibility, it's all in how we use it.

So, all of that is still true, and if you wanna dig into some of the impacts animation can have on UX, I wrote this whole book about it, there's lots of other articles and stuff out there too. What we're talking about today, kind of adds on to all of that.

It's like, okay, with all of that still being true, how can we do this, in an even more responsible and inclusive way. Much the same way we talk about, we can use colour in a great way, or colour in a not so great way, the same thing applies to animation, and all our other design tools.

So, if you're someone or if I'm someone, or if there's (laughs), if someone has realised this, that they're sensitive to motion on screen, and wants to essentially request, from their computer in general, their operating system in general, reduced motion version of whatever might be out there for their own like, health and safety, how can they do that? There's actually a lot of ways now, back in the day, even just a couple of years ago or a few years ago, I guess more like five or so years ago, we didn't have all these options, but now we have so many. If you are on iOS or OS X, any Mac operating system, you can find something like this under the accessibility panel, where essentially you can go in and say like, hey, I would like you to reduce my motion.

And this will have an impact on the OS level, and as we'll see in a little bit, we can also tap into that to make it have an effect on browser-based content as well.

For folks on Windows, there is a menu like this, it might look a little different for different versions of Windows, and, but it's also there and available to either turn on or off this option to show animations in Windows.

You can go and turn that off if you want reduced motion, or leave it on if you don't.

There's also settings for this in Android operating systems as well, but I don't have any screenshots of those.

So, sorry about that.

On the other side of things, how can we, as like, the people who design and build things for the web, how can we tap into that setting? How can we know if someone has asked through OS, for reduced motion, or has requested reduced motion from their OS. As it turns out, there's actually some really great support for this on our end of the world, our web end of the world, pretty much every modern browser, and there're most recent versions, like current and most recent versions, support the prefers-reduced-motion query, which allows us to essentially ask the OS like, hey, has this person requested reduced motion? And if they have, we can do something about that, change things up and provide reduced motion for them. It's also worth noting that if someone arrives at your site using a browser that does not support prefers-reduced-motion or doesn't support this query, nothing bad is gonna happen.

It's really just gonna kind of fail silently, it'll be as if it wasn't even there.

So, that's kind of nice.

It's like, we can use it on all of these browsers, so, it's definitely something we can use in production today, and you don't have to worry about what happens, if someone comes with an unsupportive browser, because it's not that much of an issue, at least, well, nothing will happen, which could be an issue, but nothing bad will happen either (laughs). So, since it's a media query, we access it or use it the same way we would use any other media query, so in CSS, we could use something like this, and say, hey, is the prefers-reduced-motion value set to true? If it is, we'll do a thing to maybe adjust the motion. Same thing at JavaScript, we use matchMedia here, but same idea, we essentially query this, and say, hey, what is the prefers-reduced-motion setting? If it comes back as true, we can do a thing with that, and provide that reduced motion mode for folks. So, it's easy to access as any other media query, and the browser support is pretty darn good. One thing to note about the response though, is we can get back one of two values.

We can either get back a response of true, which is reduced, so basically saying like true, they have requested prefers-reduced-motion, or we can get back the preference of the value of false, which equates to no-preference.

And they, only one of those two settings that we can be absolutely sure, someone has set intentionally, is the value of true. True always means that someone went into their OS settings and check that box or change that toggle to be like, yes, I want reduced motion.

No-preference or false on the other hand, that's one value can like, no-preference is the same as false.

That can mean that someone just hasn't set that setting yet, or it can mean that they are perfectly fine with all levels of motion and don't have any motion sensitivity concerns. So, the only one we can really rely on, and know someone has set intentionally, is true. Which is why the pattern we usually see, and the pattern I recommend, is to request the result of reduced motion and if it's true, then reduce things.

It's not maybe as clean of a progressive enhancement situation as we might want, but we can do a lot with those settings and those values. So, the other side of this equation, is the question of what types of motion can be problematic for folks with motion sensitivity.

You can kind of tell from the way it's talked about, that it tends to be like certain kinds of motions or certain categories of motion that are problematic for folks with motion sensitivity. The web content accessibility guidelines, defines the type of animation you should consider providing a reduced version of, a meaning or applying to rather, any motion that creates the illusion of movement. So essentially saying, any motion that creates the illusion of movement, so, something essentially has to be moving, to create the solution of movement on screen, that is something you should consider providing a reduced version of.

And that's painting with a really broad brush or casting a really wide net, whatever metaphor you prefer, but it makes sense in this case, things, erring on the side of caution is probably a good thing in this case, I mean. There are a few effects though from my own research on this, and talking to folks with motion sensitivities, that are especially problematic or almost universally problematic for folks with motion sensitivities.

One of those is spinning and vortex effects. So an example of that, is this designer site here, where you go to the site, and as it loads up we see some texts moving in, and then there's this like, pixely starfield that spins around.

And my video stops, but on the live site, the starfield goes and goes and goes. And it's like a great effect, kind of gives it this nice starry, I guess, feeling, but if you're sensitive to motion, that spinning effect, even when it's just those little single pixels, that constant spinning, especially in contrast to the text that's static, creates doubt, I mean, definitely creates an illusion of motion, a spinning motion, and that spinning motion itself can be very problematic and triggering to a lot of people's motion sensitivity. So, spinning effects, definitely a thing you wanna create a reduced version for. Multi-speed or multi-directional movement are also something that every single person I've talked to, who, says they have motion sensitivity to motion on screen is like, yes, that is 100% always a problem for me. I have not found a single person who's an exception to this yet.

If I do, I'll let you know, but for now, this is 100% always a problem for people with motion sensitivities to motion on screen. The best example I could find of multi-directional, multi-speed motion is this site here, it's really beautiful, definitely great.

But there is a lot of different directions and speeds going on.

So, when you scroll down in this site, you get this, so, some of the things go forward, some they'll go up, some go down, and they go back very multidirectional and very multi-speed. Now this idea of multi-speed animation, multi-speed movement, my key of you, start making you think of parallax, which you totally should, because literally the definition of a parallax effect is having different layers move at different speeds, so that is 100% definitely, multi-speed animation. Oftentimes it's also multi-directional, but what that means is, if you're using a parallax effect on your site anywhere, that is pretty much guaranteed to be problematic for folks with motion sensitivities.

Meaning that people with motion sensitivities, probably can't access any of your content that's given or presented with parallax, because it literally makes them sick.

So, not to say you should never use parallax, you can if you want, it's up to you, but if you do, you should absolutely provide a reduced motion mode or a way to access that content without the parallax, for people with motion sensitivities.

The last one I wanna bring up, that's almost universally problematic for folks that I've talked to with motion sensitivities, is constant animation near text.

And we kind of saw that with a spinning example of couple of minutes ago, but this really applies to any type of motion, whether it's spinning or not, when it's near text. Like imagine like, a pull quote constantly animating while you're trying to read text over here, and that contrast of this like, illusion of motion, and this text you're trying to read is a, can be a really big problem.

A lot of people tell me what they'll do is just kind of like, use their Text Zoom to zoom in as far as they possibly can, until the animation is out of frame for them, or out of view for them.

We can make that a whole lot easier for folks that can't, that are effected by that constant animation near text, by providing a reduced motion version so they don't have to do all that effort to get the animation out of the way and focus on the text they wanna read.

If you want some more examples of motion that's potentially triggering or problematic motion for those with motion sensitivities, I wrote a whole article a few years back, that goes through and points out, it shows a lot of examples of motion that can be problematic, there's also a really great article on the WebKit blog that goes through some different examples and I cover, and they also talk about how those can be mitigated or reduced for, to create safer emotion for those that have requested reduced-motion.

So it's really kind of great to see them work through those. So lots of places for examples, if you'd like to see some more, but definitely keep that web content accessibility guideline definition in mind that, effects that create the illusion of motion, those should be the ones you're creating a reduced version for.

One thing though, that is not on my list, in either of those articles and specifically called out as an exception in the web content accessibility guidelines, are things like, transitions of colour, animated colour changes, fades, opacity fades, blurs, animation effects that do not involve motion at all, because they don't involve motion, they can't create that illusion of motion, so, they aren't something that we include in this category of effects that should have a reduced version. I call this out as well, because it's interesting that this list comes up in another place where if we think about the kind of baseline UI animation we might use in an interface, it's usually the first things we reach for, are things like colour fades, opacity fades, small changes in scale, things that are unlikely or completely not movement at all. So, I think that's an important thing to keep in mind that when we're talking about this idea of providing reduce motion and motion sensitivity, we're talking about a specific type of motion, a specific category of animation, not necessarily all animation.

And it'll become, it's, it also makes it easier to tackle, all right? If you're just like, oh, everything, that's really hard to get your mind around. These specific types of things that's easier to address and talk about because you have a specific thing in mind. So, now that we've talked about the kind of motion and we should be providing a reduced version for, let's talk about how we can pull that off.

How can we respect request of their OS for reduced motion in the browser? Well, I think the best approach is kind of like, I was just saying, first identify the potentially triggering motion you might have.

Go look at your site and really make a specific list of the types of effects you might have that create that illusion of motion. Those things that's spin, those things that are big movements that create that illusion of motion, definitely any parallax, find out where you have those. And the main reason for that first step is that it just makes it so much easier to address something specific.

Like I was saying, if you're like, oh, some of the motion on our site might be problematic for some people, that's really hard to like, address and like, know that you've done something meaningful to help fix that or help change that, if you can say these five effects that we use in these like, three places, are like, do create the illusion of motion and they're something that we need to provide a reduced version for, for folks with motion sensitivity, well, I mean, that's just like, like that feels so much more approachable (laughs), we wanna feel like we can do, make an effect on this. So, once we have that list of things, and for most sites, it's probably gonna be a fairly short list based on kind of research I've done out there, but kind of looking at sites and kind of taking note of what things may or may not be, creating that illusion of motion, for a lot of task-based sites, it's probably a fairly short list.

It all dependent of course, on your site and what you're doing with it and what your design is like, but chances are, that list should be fairly short. Then once you have that list, you wanna look at each of those effects and decide what the best approach to reducing that effect is based on the context of why that effect is there and what it's doing.

And the biggest important part there is considering the context, because what you wanna do is reduce the motion, so it's a safer experience for folks that are sensitive to motion.

What you don't wanna do, is accidentally remove content or break things, or make things harder to use, or leave out content that's important, it's really about making this a safer experience, not necessarily about removing things, especially if you're removing things that are important. So, examples are always helpful, let's look at a couple. So, this is, well, this is iOS, I should probably recognise it, and by default, there is a really dramatic, big zooming effect going from the home screen to opening up an app.

If you haven't seen it before, or haven't seen it in a while, this is what it looks like, so, really big dramatic zoom, definitely an illusion of motion, definitely an illusion of extremely fast motion, of like a thing flying at your face, so, if you're sensitive to motion, this is something that's definitely gonna be problematic. In fact, this particular fact was very problematic and there was articles written about how problematic it was for folks with motions sensitivities.

So, to fix that, iOS added into their prefers-reduced-motion setting, so you, if you, basically, they put in a, they substituted a safer effect if you had requested reduced motion.

So if you were like, yeah, give me a reduced motion, when you went to go open it up, you would see this effect instead, and what they've done is replace that very problematic exaggerated zoom transition to a non-motion effect across fade in this case, that since there's no motion, is going to be safer for folks with motion sensitivities. So, they've essentially substituted a potentially triggering effect, to a safer effect with no emotion, a non-motion effect. So, great way to do it, just kind of substitute what's happening.

Another example we saw earlier, I thought it would be great to show it, what happens on this site when you go with reduced motion, if you go and visit that site with prefers-reduced-motion on, on your OS level, this is what you get.

So it's very similar, we still have the navigation, hover animations, we still have some other of those like colour fades and stuff on hover, but the starfield itself has been paused, and the text doesn't move in the way it did before. So, we still get the idea of a starfield, the really integral like, hover animations that really help, what's active and what's possible, the things that are really integral to the design and usability are still there, but that motion effect of the spinning starfield, has been essentially just paused.

Which makes sense in this case, because a pause starfield, gives you much the same, like conveys much the same feeling as a spinning starfield, the spinning starfield might take that effect in that kind of mood a little further, but if it's not safe for you, then a static starfield gets just about that same meaning across, and you get that vibe from the design and an experience that's safe for you.

So, it's a great way to handle things.

I found that oftentimes swapping out the property that's animating can be a great way to go from a potentially triggering motion, to something that's safer for folks with motion sensitivity. So for example, if I had a header like this on my site, it's definitely, got a lot of motion going on, there's definitely illusion of motion, things are multi-directional, coming from all directions, this is something that I'd be like, yeah, I need to provide a reduced version of this because definitely on the illusion of motion list. The way this one is built, it happens to be done with CSS transitions, and essentially, when we've set it up is that the plant photos that kind of come in from different directions, they start out either being above or below where they normally would have been, and then there's a transition assigned to them, that's basically like use this duration, use this easing or use this delay, and then when your position changes, transition using those roles, that's the beginning state. The ending state essentially tells all of those photos, just go to where they would have been anyway. So, go from where you were up here, to where you were down here, depending on the photo, to where you would have been anyways.

So that's the beginning of the end state and we transition between them.

Using that, I can add a media query to check prefers-reduced-motion and be like, hey, has someone requested that they would like reduce motion here? Do they want reduced motion? Awesome. They want it, cool.

Plant photos, instead of starting up here or starting down there, just where you would have been anyways, like, remove that transform, that translation. And instead, be right where you were going to be, right where you're going and having an opacity of zero. And then the same thing for that text, instead of being out here and out here and moving in, just be in there already, go, be where you were gonna end up, and having an opacity of zero.

And then when I visit the same example, with prefers-reduced-motion turned on, or with reduced motion requested rather, I'll get this. Where everything about the animation is the same, except the property animating.

We have the same easing, the same timing, the same duration, the same order, the same, all of that, but we just replaced that translation, with an opacity change instead.

So, we made the opacity property animate, instead of the translation property.

And we went from a potentially problematic motion for motion sensitivities, to one that is safe. So, often cases, oftentimes rather, swapping out that property, and this will work whether you're using CSS transitions, or keyframes or JavaScript animation libraries, swapping out that property is often a really great solution. Of course, the technique works really well for sites that use just a few motion effects here and there, right? The sites that are maybe, you're going, and we call them like task-based sites, right? Like you're going there to do a thing or buy a thing, or read a thing, where motion is part of the design, but not like a main focus of the design.

So, what if you have a site where the design relies very heavily on motion? When it comes to size that rely more heavily on animation, things that use motion as a really core part of the content and the design, and just use a lot more extensive motion effects in general, maybe sites that are more of like an experience, or storytelling or whatever it might be, that's when using a custom toggle, like having a toggle right there for people to select reduced motion right on your site, can be a really useful approach.

It can make it a way that people can access the reduced motion they need right in context, without having to have set something ahead of time. And part of the reason why I suggest that is like, this OS level setting for reduced motion is still fairly new.

And while a number of people do know about it, not everyone who might necessarily need reduced motion or want reduced motion might, not all of them might know about this OS setting. What's more is that people who are aware of it, generally have learned, based on like, the wording of the setting, that it very much applies to motion they might encounter as part of their OS.

But not everyone knows that it can also apply to content in the browser as well.

Now, part of this is because not very many sites tap into this setting at the moment and look for that setting and provide reduced motion, so, the more we use it, the safer the web can be for folks with motion sensitivities, through the reduced motion setting, it's kind of like a chicken and the egg thing, right? Like the more we, it's like we have to use it more for it to be more useful. So, or maybe that's not very chicken and egg, I don't know. Either way, the more we use it, the better it's gonna be for people who need it. And the more we use it, the more awareness is going to be, this OS level setting, can also apply to content in your browser.

So, having a custom toggle there, can be a really useful thing, for these more highly animated motion heavy sites. One of my favourite examples of this, is actually the Animal Crossing site.

Where when you go to the site, it's very much what you might expect, right? You're like, hey, it's a site for a video game. There's probably gonna be a lot of animation and stuff like that, and you start to see like some of the effects, things you'll see when you get there, is this like spin kind of vortexy thing going on, going through the characters, there's even some particle effects, just throwing stuff all up over the screen, and it's super fun, but definitely stuff that would be problematic for folks with motion sensitivities.

So, they also have right there at the top of the site, in the hero section, this toggle, it says, reduced motion. And if you click that button, you get the reduced motion like experience. So, in that case, once you click that, you get the reduced motion version of the site, where you, what you encounter is more like this. So, those really highly spinny effects have been replaced with crossfades, the particle effects have been removed, but there're really, there's kind of an extra thing anyways, because you can still scroll through or rather page through those characters and their birthdays getting that crossfade, and if you look at the live site, you can kind of go through the rest of it a lot of these more, these like, potentially triggering motion effects have been replaced with crossfades or fades or other things, so, all the content is still there, you can still access all of the same, like, characters and information, but it's done with less reliance on motion with a reduced motion.

The other great thing about this toggle, is when you're here on the reduced motion mode, you'll notice that you actually have a toggle to enable motion, so you can go back to the highly animated, the high motion version of the site if you want to, like, maybe today you're feeling good and motion is fine, or maybe it's not, whatever, you can go back and forth, as you decide, as the person using the site.

Also, if you come to the site with prefers-reduced-motion, or sorry, with reduced motion requested in your OS, you will automatically see the reduced motion mode. So, there's a lot of flexibility, and it's like really working for the user in that sense. If you've already indicated you want reduced motion, you will get reduced motion, but you still have the flexibility to go back and forth between the two modes, to control the level of motion you encounter, like based on your needs in that particular moment, which is super great.

If a toggle like that is something you're thinking it might be great for your project, Marcy Sutton has a really great CodePen example, that is part of her making accessible web apps course, there's more to it than just motion, but this particular part, she talks about this motion toggle, that works in very much the same way.

It really is like a stripped down version of what you just saw on the Animal Crossing site. Where this toggle, if, just with nothing set on the OS level as far as motion goes, when you come to this site or this example really, you'll get a little toggle that says, hey, do you need reduced motion? And if you select it, it will remember your preference on subsequent visits, and if you arrive there, you already have reduced motions selected on the OS level, it will automatically respect that.

So, super smart toggle, and smart in a way that even just a few years ago, we wouldn't have been able to make something quite so streamlined and quite so smart, work really, works with the user, as opposed to making it super awkward for them. So, it's a great way to give people an option to control the level of motion they see on your site, when you rely heavily on motion, as part of the experience you're creating.

And this idea of toggles sometimes feels a little weird, like I think we are like, oh, toggles, why would we put that everywhere? But we kind of already are, like, once you start looking for toggles, you realise they're everywhere.

This is a Twitter setting panel, and they also have a reduced motion setting in their settings panel.

Which for this site is like makes perfect sense. 'Cause the level of motion that Twitter uses and the fact they already have a settings panel for a lot of these things, it makes it a really good match, like for the content and the level of control you might want around motion. This one is also smart in that if you come to the Twitter site and you already have reduced motion requested at the OS level, it will automatically toggle this for you, to match that OS setting, but if you haven't set that yet, and you do want reduce motion on Twitter, you can go and do it just for Twitter, in these settings as well.

So, including a motion toggle in a settings panel, if you already have one, maybe for like dark mode or whatever else, that can be a great place to add one as well. Adding motion toggle doesn't necessarily have to mean just stick one in the middle at the top of your site, it can be, it definitely needs to be somewhere where it can be easily found of course.

But a place where it could be easily found, can change a lot based on the context and type of site that you have.

So, we have that flexibility, you can design it and put it wherever it makes sense for your content.

Another interesting use of toggles, since we're on the topic is the, what, the toggles that are used in this dark side of the grid article series, most of the articles in this series, had figures that were animated, and those figures were usually animated on a loop. So, it was like constant animation once you have them started.

So, they have these toggles in context, whereas you're reading the article, you can just go and click that button to be like, hey, show me the animated figure. And then when you're done, you're like, stop the animated figure.

And by having that control, that level of control right there where the figure is, you never end up in that situation where you've got constant animation near texts that could be causing problems, and if you are reading this article at a time where motion is just not a thing you can handle right now, you could just never toggle the animations on. So, you have that level of control right there in the context of where the animations are. So, that's another way toggles can work as well. And one other suggestion that I thought was really interesting, is something that Chris Coyier posted, a CodePen a while back, where he was kind of exploring this idea of like, hey, what if we provided a toggle for people who've requested reduced motion to give them that extra level of control.

So, his example here, things animate normally at first, if you have reduced motion on, then the animation stops and you get a toggle, or a little button rather, to control the animation as you wanted.

He was doing this in the context of animated gifts, so, maybe a little bit different than like a site-wide toggle, but still an interesting way to implement a toggle and to give that level of control in a place where like, it makes sense, like in context. So, there's lots we can do around toggles, it doesn't have to necessarily mean one thing, and it's, there's definitely even more solutions coming up, it's really great how all of us, people on the web tend to share a lot of these solutions. I'm sure we'll find even more coming up, and being shared in the future as well.

So, I hope this talk has helped you to see, how we can be creative with motion, even really really creative with motion, while still being inclusive and considering accessibility. By identifying potentially triggering motion and mitigating that with a prefers-reduced-motion query, or custom toggles or whatever makes the most sense, we can expand the audience that can meaningfully participate in our content and safely participate in our content. And expanding your audience is pretty much always a good thing.

So, that feels very win-win to me.

If animation around this reduced motion stuff, or even the greater topic of web animation is something you like, I send out a newsletter every Friday, that I can tell you how cool animation is once a week, if you're into that, you can join the newsletter, and I'm also always happy to talk about this stuff, and answer your questions on Twitter.

So, thanks so much for listening.