 Hi, welcome to Designing in the Browser. Today, we're finishing up our series on accessibility and design by talking about interaction and animation. Building websites with little moving and responsive bits can really bring delight to your users and also establish your brand in a polished, professional way. These touches can be great for user understanding in a digital environment, but they can also leave some of your users disoriented and frustrated, which is the opposite of the intended fact. So let's talk about how we can avoid that feeling and how we can be sure to include our cute animated SVGs and button hovers, while also ensuring that users who might get a little bit nauseous when seeing a lot of animation in front of them can also enjoy your site. I'll be demonstrating how to use the prefers reduced motion media query to progressively enhance animation into your website, as well as show you how to build a simple reduced animation switch. Have you ever jumped into a web page only to see yourself confronted with a big animated loading screen while you wait for the content to actually appear? Yeah, I don't love waiting either. The first type of site that comes to mind, which does this a lot, are agency sites or media websites, which take this time to showcase their portfolios. And while website intros can be a cool experience, there's usually a lot going on there, and they're not my favorite to wait through. I'd rather access that portfolio content on my own terms. But for people who have vestibular disorders, this can actually make them feel sick at worst and just leave your website at best. You may have just lost a valuable customer. I know that I've definitely lost my patience and have done this before. With parallax effects and a lot of interstitial motion, too, some of your users might feel frustrated navigating your application. This very UI issue became a pretty big problem when iOS 7 came out in 2013. There were full page transition effects zooming in and out of apps. And while the intention here was to provide context to this digital experience, some users reported experiencing vertigo and motion sickness. In response, Apple added a reduced motion mode within their accessibility settings. It's generally advised to avoid complex loaders or auto playing video for this reason, especially if they're blocking users from actual content, there are other types of animations that may be distracting to your users as well. According to the Web Almanac HTTP Study in 2019, infinitely looping animations are quite common on the web with 21% of websites using them through infinite CSS animations or with the marquee and blink elements. If you must have some sort of animations like this at your site, it would be wise to have some sort of switch that enables your users to opt out of the animation or better yet, a switch to opt into it. You can also use the prefers produced motion media query, which it looks like at media and then in parentheses, prefers reduced motion, to specify an experience for users who have the setting turned on. This can be used for larger animations, such as having full screen transitions, or you can use them for micro interactions, such as on buttons and on cards throughout your site. In this example, I have these three cards. And when I hover over them, there's this flip animation and this read more call to action on the back. And so you can also tap through these. I'm using my tab key now to go through. You're still seeing that flip animation that's a transformation on this y-axis. I'm using a 180 degree rotation, rotate y. And I'm using focus within a long side focus and hover to make sure that that interaction is visible for any type of either keyboard navigation or mouse navigation on these cards. Now this is a bit of a loud interaction for these cards with that card flip. So we can use the prefers reduced motion media query to make adjustments. In this example, I'm using the reduced motion media query and I'm actually moving all of that flip logic inside of this media query. So it's at media prefers reduced motion, no preference. And if there's no preference here, I'm still going to be using that rotation y to create that effect. So now if I hover over these, you're still seeing that rotation. I'm still able to access that read more button. But if I go into my user settings in my system preferences and I reduce motion when I refresh this page, now there's a much more subtle animation. And I'm still able to access this on tab. I'm able to go through all of these cards but there's an opacity change instead of a y rotation for that back of the card. And so here I'm just using this as the default state. I'm going from opacity zero to opacity one, still using focus and focus within and hover to apply styling to the back of this card. And this is how I'm able to create this more subtle adjustment while keeping the card flip interaction. If I want that to be something that users see. This is a way that we can be inclusive to users that don't like having a lot of animations and loud interactions while still having that capability for our other users. Another good idea would be to progressively enhance from this state, from this more subtle animation state and have a call to an increased animation state. And that way we can make sure that our users are being able to get the content they need but be able to set the user preferences they want for the type of animation that they are using when they are on the web. In this example here, we have those same three cards with the flip animation and that read more button on the back. But the difference is we have this reduce animation checkbox. And when I check that, now all of these buttons are going to transition with the reduced animation that has the opacity transform instead of the rotate Y for the flip. And essentially all that we're doing here is when clicking this button, we're specifying to add a class of reduced motion and then remove the class. It's a pretty simple script, just adding and removing a class and then we're using that class to apply the reduced motion state. So this is the opposite of the last example where we are applying a active state, a more loud animation state through a media query. Now we are adding the reduced motion state with a given class. So this is going to have a bit better support than the preference media query and browsers. And this is a great route to take for allowing your users to specify right on the site the amount of animation they want to receive and the interactions that they prefer. As I mentioned in the color episode which was episode two, there are a few other interesting media queries that are coming to browsers that will really help you tailor your user's experience to their preferences and needs. And those include first color scheme, prefers contrast, prefers reduced transparency, forced colors, inverted colors and light level. Most of these are still in experimental stages, however. So it would be wise to limit their usage and ensure proper cross browser testing. Hopefully these two techniques using reduced motion media queries and enabling animation off switches on your website will help you better balance adding interactivity and sparkle to your page with making sure that those added touches are welcomed with open arms. That's it for our series on accessibility and design. If you're interested in more shows like this, be sure to watch the previous episodes on semantic markup, proper color contrast, accessible navigation and focus as well as images and media. This is really important stuff to bake into your products from the start, so make sure to really implement these suggestions and spread them throughout your team, making accessibility a key goal in every step of the process. I'm signing off, thanks for watching.