 Today, I'm going to talk to you about SVGs and how to make them more inclusive and challenging you all to think a bit more about real users and their needs, all within this roughly 45 minutes. I posted a link to the slides that should have the notes as well if you want to follow along at home, or if you want to reference it just later, that's fine too. If you do have a question, I'm keeping the chat open. If I missed your question, Amy June, I'm sure will spot it and ask me again at the end, but feel free to ask during the middle. I can just pause and kind of freestyle it a little bit here as this is more of a demo based presentation today anyway. All right. So my name is Carrie Fisher, I'm a senior accessibility trainer and developer. I work at a company called DQ and I've been building websites professionally since around like the early 2000s. I've worked with a lot of different frameworks and CMSs, including Drupal. Drupal was my first CMS experience in a professional sense. So my job, they threw me in the deep end, was going from a Drupal 4 site to a Drupal 6 site and taking two sites of making them and merging them into one. So it was like a lot of Drupal. So I started like that where I kind of did full stack and then I whittled myself down to from a developer because that's what I like the most and then I whittled it down a little bit more and now I'm accessibility professional. Just recently I went back to grad school because hey, it's 2020 and there's not enough going on. So I thought I'd add PhD into the mix. I'm doing that in human computer interaction and that's at Iowa State. All right. So the agenda for today, again, that's kind of a loose agenda. We're going to do a lot of demos. I'm going to first introduce you to the concept of anyone who's new to what SVGs are. They're scalable vector graphics. I like to think of it as a visualization of actual code because it is code and you can pack it with a lot of goodness. You can pack it with a lot of information, especially if you're talking about infographics or things like that that are pretty complex and they go beyond like having like an image alt, right? So SVGs on their own are pretty accessible. Add a few more things. You make them even more accessible. But we really kind of stop. It seems like a lot of times on just patterns. But we've come a long way beyond that. So we have robust patterns. We have techniques to help us optimize this inclusiveness. And that's true regardless of what kind of SVG that you're using. A lot of people use them for icons, simple images, or like I mentioned, complex like infographics and that sort of thing. And of course, the pattern depends on which situation you're in and then also what kind of WCAG conformance level that you're targeting. But again, most people just kind of stop at the pattern. They don't really, they focus more on that code compliance. They don't really think about those end users and their actual needs. So if we think about it as true inclusiveness lies beyond these patterns, what other things should we talk about? And so that's kind of where I came from on this kind of idea. And I wrote an article about it. There's a link again in that notice section in the resource section. But the things that I wanted to focus on today, we're talking about beyond the pattern. So color and contrast, give you some tools, some guidelines. And then we'll talk about this light, dark mode. If you haven't already talked about it or don't know too much about it, this will help you. This would be kind of a primer on that sense. And then we're going to get into the, let's see my notes here, the accessibility considerations. So we'll talk about light mode, dark mode, and then the other accessibility considerations. And then we'll move on to SVG animations. Again, tools and guidelines, then the reduced motion demos. And then again, some accessibility considerations. And then we'll wrap it all back up into any questions that you guys might have. So hopefully that's all clear. All right. So primary focus of accessible SVGs, again, we think about patterns. That equals essentially screen reader compliance. But that's only part of the issue and part of the solution. Globally, if you think about it, people with low vision and color blindness outnumber the people who are blind 14 to 1. So we're talking a staggering 546 million in total. So 246 that are low vision and 300 million that are color blind versus 39 million users who are legally blind. Of course, people who are legally blind are very important. And screen reader compliance is very important. But a lot more people can benefit from things like color and contrast and reduced animation. So that's why we're kind of focusing on that beyond the patterns. So a lot of people with low vision and color blindness, they don't use screen readers. Some of them do, some don't. They might instead use tools like browser resizing, customized style sheets, or maybe even magnification software to help them see what's on the screen. So that might be on their own or just using like a browser to blow things up. So according to these people, again, screen reader output is probably not first on their list. They want to be able to see the SVG on the screen. So how do we go about doing that? As always, WCAG, if you're new to accessibility, web accessibility compliance guidelines, they're going to be the first kind of step for anything that you do when it comes to accessibility. And SVGs are in that as well. So they break it down. They don't talk specifically about SVGs super deep and detailed, but the sections of them apply to them. So in this particular case, we're talking about SVG color palettes. There's WCAG color contrast ratio guidelines. Whenever these SVGs and other icons are exempt from color contrast ratio requirements not too long ago, but now with the recent updates to 2.1, these guidelines have made it so all essential non-text imagery must adhere to the contrast ratio of at least 3 to 1 against adjacent colors. So by essential, it means if your SVG were to vanish, would it fundamentally change the information or functionality of the content? So if you think about it and you can answer solidly no, then you're exempt from that kind of guideline. But if you answer yes or maybe, then you fall into that SVG color contrast ratios guidelines that we're just talking about. So it's very important that you think about that, even if you're not conforming to 2.1, WCAG conformance 2.1, 2.2, and actually three are super right around the corner is learning about them this week some updates in them. So you've got to catch up. You've got to get on 0.1 at this point. So to check for these accessible color contrast ratios, there are many, many, many tools to use. Again, the references that I have in my talk, they should be able to point you in the right direction. But for a quick color contrast spot check, you could use the contrast checker and Chrome DevTools. That's one that I know a lot of people use Chrome. A lot of people are familiar with the DevTools. But now that's built into it, which is really great in the last year or so. For checking color contrast on non-coded designs, so if you are more in the mock-up phase or you're using a tool, your code is not quite there. You don't have a style guide in place. Maybe you're using InDesign or something. There is a tool that I really like called the color contrast analyzer. And it'll allow you to pick from anything. So it doesn't have to be in code. It could be on an image or in your background, like even like an icon for a program if you really liked the blue color and Photoshop or something. Likewise, I also use color blindness filters. We have to, I have to make point that, these filters are simulators. They're tools for empathy building. They're tools for getting a quick idea about things, but they aren't true representation of an individual with a disability. So they're just kind of there to give you approximations. So use them with a grain of salt. Of course, with all tools, just make sure that you try out a lot. Pick a few that you work for you and then what works best for your team because the best tool is one that you actually use. But I feel like we all kind of know that, especially color and contrast. What I'm really more excited about is going beyond that and then talking about, and beyond the color contrast ratios behind, beyond these filters that we just talked about. I like to really talk about like some of these media queries and that's what I'm gonna demo today. So the first one we're gonna talk about is called perverse color scheme. And that allows a user to choose a light or dark theme based on a version of the website or app that they are visiting based on their personal preferences that they've chose on their operating system. And while this media query does not replace checking for color contrast ratios, can give your users more choice when it comes to the overall experience of your website or app. Good question. So there's a question here from, I believe, Selen, hopefully I said that right, but what browser support for perverse color scheme media query? That's a good question. And actually this one and the other one that I'm gonna talk about today, the perverse reduce motion are pretty universal when it comes to browser support. I would have to do to look up the can I use website just to get the most up to date? But I'm only showing these two today because of that very specific, yeah, there you go. The very specific question that we have, there you go, pull this one over. You can see that one. So I'm only demoing this because there's a lot of media queries that are coming out. That should help you. And thank you for the link, McCurth. So we have, again, the blue or sorry, the green represents ones that are positive, right? And you can use it. And the reds are the ones that are have a little ways to go. And they always have these little asterisks because they're working on them where they have specific bugs or they work on specific versions, but not others and that sort of thing. So you can see for desktop, besides IE, we've got Edge, Firefox, Chrome, Safari, Opera, and iOS, Safari, Chrome for Android and Firefox for Android. So you can see these are in Samsung internet, which I've never used before, but it also supports. So you can see it was a pretty wide range for that support for that. So that's why we're talking about it today. All right, so this one, we're just gonna quickly do this. Grab the code pin if you want the link. Otherwise, again, it's in that noticed link that I posted a few seconds ago. So as with other media queries, to see these things, right, to use them, the lights are theme change in this particular case. Our website or app developer has to add additional code targeting the query. So it doesn't like auto magically happen if you put this on your website. But going back, like thinking about it, it's not really that complex. And if you're using patterns, style guides, you're doing everything the Drupal way, you've got it all kind of set up in the sense where you might have variables, right? And you might be able to set this up where just adding a few simple changes could make a whole completely new theme. So what I'm gonna show you is a really small example, and this is the one with the code pen as well. We'll look at that one. Got a couple screenshots, but then I'll actually show you the code. So what we have here is just an icon. As we talked about it before, this is actually an icon from my website. And so it's an essential icon because there's no text that goes with it. It's just a icon of the home. And underneath, I've got it set up with the alt to be to say home. So it is rendering perfectly fine for screen reader users. But let's say that that contrast isn't enough for you. And so I invented or created this dark mode version. So then that way if someone has prefers color scheme dark, I changed a few of the variables and it was fine. And in this particular case, I'm showing the written out version of the hex code. So, but that could be a variable. It doesn't matter how it is. One note about SVGs in general is that if you have them inline, I can control more things on them, like the stroke, the outline, what color I'm going to actually change on the inside of the icon itself as well. Like in this particular case, we have a green house with a purple door. And then it's kind of got a light gray outline. So these are things that you can control more of versus if you've had it embedded or referenced almost like, you know how you reference an image and not IMG tag with an HRF gray, it goes somewhere. Whereas SVG, if you actually have the code written in to the markup or the HTML, I should say. So here's the example. This is the code pen. I'll pop this one into chat too, just to have it a little bit more direct. I saw Kristen pop in there. Hi, Kristen. So what we're showing here is that same icon. I'm showing actually two different versions because one of the outlines you can see possibly could fail color contrast ratios that outline. And so what, again, for WCAG, those guidelines are three to one for essential icons. So if I was to grab out like my color contrast analyzer tool, I'll pop that one up, just kind of sit there for a second. So if I pop this one up and I pull out the background and I do the foreground, let's grab that one. You can see it fails, right? Whereas if I did this, it should pass. It passes for large text, or let's slide this guy down a little bit more. Since we're talking about icons, this is the one I would look at. So non-text contrast, that's the icons. Sorry, I can't make this change sizes, but go ahead and check that out on your own, but that should work. So this is the actual HTML. So if I kind of scroll down here a little bit, oops, I'm going to look too far. This SVG is in the HTML, like the actual, again, SVG stands for Scale Vector Graphics. So the data, the code is actually, this is a visual representation of this code, right? And so what this is showing is, you know, what it is, right? So we have strokes and paths and polylines. And again, depending on how complex your SVG is, you could have a lot more going on right here. I'm just showing you right here too. We have the ID, SVG1. And if I look for SVG1, down here, oh, here's my screen of your class, house icon with dark background. So that's that one. And we have this home button right as well. So again, pattern-wise it's fine, but we want to show the difference between the light mode and the dark mode. So I scroll down here again, and this is what I just showed you on the slide. This is the style on top of that SVG. You can see there's no JavaScript being used. No JavaScript was harmed in the making of this icon. So if you go down and scroll down a little bit more, this is all I needed to add to make this compliant with perverse color scheme dark. And some people, some people will say, why do we do the light version first and then do the dark version later? And you don't have to and you could do the reverse. So if I had this, let's say I started with a dark theme and I wanted to make it lighter, have that option for my users, I would just put perverse color scheme light, right? So the opposite is also true. So it just depends on what you start with. So if I go to my user preferences and I go to display, I'll take one back here, go to accessibility and then display, we have some information about the reduced motion and we can do some stuff with contrast and inverting colors as well. So that's one option to change the colors, but in this particular case, we're gonna go under general and then I'm gonna change my mode from light to dark. And you can see that everything kind of turned darker including the houses, right? And so what it's doing now is it's picking up that dark theme. So now my body background is dark color, my strokes have changed as well. If I bring out my color contrast analyzer tool again, we've got that background that's more of a charcoal color. I'm gonna grab this guy. So this one fails, let's grab the other one, whereas before it passed, right? And so this one passes for the icon now. So again, just kind of showing me the differences and the visual representation of the dark scheme light as well. Going back to a more complex demo, I've got this guy. So I'll grab this link for you as well in the chat. Yeah, Liam, he asks, instead of SR only class, could there be ARIA label on the SVG element? So I wrote a pretty complex, actually I can grab it right here. There we are, deep dive on accessibility patterns. So this is, if you are considering, are you thinking about patterns? I would recommend that you take a look at that because that kind of compares all the different, I looked at 12 different patterns and screen reader tests. So you can see which ones are most compatible. Otherwise there's this, I'm kind of doing some of this on the fly. There is this really awesome site called aliceupport.io. If you haven't checked that one out as well, you can take a look and see which ARIA rules are supported as well. But again, that's more into the pattern world. And so we're gonna focus today less on patterns and more on the color contrast and the prefers reduce motion. So yeah, but if you're interested in patterns, hit me up later. I've got a lot to say about that as well. All right. So going back to the light, dark mode, we have this chameleon, and this is a more complex, excuse me, more complex light, dark mode kind of situations. Grab this guy. And so it's very similar to what we had before with the house, but the house is really simple, right? I think we had 14 lines of HTML, whereas in this more complex one we have, I don't even wanna guess how much I have here. I don't wanna make anyone sick here as I go down here. 163, okay, not as bad as I thought. But we have multiple SVGs that are on this particular one. We have the rocket that's swinging by, and we'll see that when I come back and prefers reduce motion. But also we have the color changing chameleon. Again, we'll look at that one. But right now we're in dark mode. If you remember, we switched that on our settings. If we move back to light mode, you can see it's a whole new kind of situation. This chameleon, instead of being in space and having a rocket fly by his head, now we're back in the forest where chameleons probably belong, and we've got this butterfly that's kind of fluttering about. So if I looked at the CSS and didn't look at that as much, obviously we have animation. I tried to make some notes about where I had things going for any of you people who like Boy George. This is Karma Chameleon who goes from red, gold, and green. No one else thinks that's a funny joke except for me, but hey, we gotta do things to entertain ourselves as well. But so again, I'm using the light theme as my base theme. And so any other changes that I wanna make to this are going to come in with the prefers color scheme. Sorry about that. Prefers color scheme dark, and that's where I'm gonna introduce the change in the background. In this particular case, I've got a background of black. My image again was that space theme, so I'll pop it back to dark here just so you can see it. And I've got some rocket containers, but otherwise I've written maybe about, I don't know what, I guess like 14 lines, maybe 10 lines of code here, a little more than 10. But with only 10 more lines of code, I've got a completely different kind of theme. Obviously I've got some animations and some other things going on that are a little more complex as well, but as far as the light mode and the dark mode is concerned, we've done a lot with a very small amount of coding involved, and it's one of those things that as a user, I have a lot, I'm having a completely different experience with these different modes. If you're doing this on a website or an app, you might not be doing an extremely different mode in all sense, like experience, but even changing those little things can be helpful to somebody who's got color contrast, issues, low vision, color blindness, that sort of thing. All right, Rick had a question. I didn't see you where you're referencing the SVG and your code, how does that part work? I'm wondering what we would do in order to allow our content creators to use SVG files in a WYSIWYG, like add in a one-off image. So you might have missed that part earlier, but when you talk about SVGs, you have different types, different ways to do it. So again, going back to that pattern, I should have not closed that window. Let's go back to the, yep, we'll go to that one. So when you have patterns, you have a lot of different options. I'm just showing you again, I've already referenced this one earlier, this pattern guideline, but the first way that you can do SVGs, excuse me for the scrolling here, wasn't planning to use that, is to use the image tags, the IMG tag, and then you can essentially, you've got your source file, just like you would with any SVG. In this particular case, it's acting just like an image, so you can have things like alts. Whereas what I'm showing you with the chameleon and with the house icon, scrolling down a little bit, is using the SVG tag. And so within that, there's a lot of different ways that you can set it up to make sure that it's accessible for your users, again, depending on what assistive technology, which browser, which operating systems that you're targeting, there's a lot of different ways to go about that. Hopefully that answered at least that first part of your question. Yeah, and Anthony's mentioning that SVGs, they are scale vector graphics, so it is code, a visual representation of code again. So it might not be super good for your WYSIWYGs. Could be a security issue, yep, that makes sense as well. All right, keep the questions coming too, and if we don't get to the full answer, we can circle back at the end and have a conversation as well. So hopefully that gives you a good quick primer. Again, there's two demos, the house and the chameleon light dark mode. So that's all we were just focusing on for that particular case. So hopefully that made sense because we're gonna move on to the SVG animation. So, and I know I'm throwing a lot at you, so definitely let's talk about it later if you have any questions. So in conjunction with color and contrast, how your SVG moves on the screen is another important aspect to consider when designing and developing with the inclusiveness in mind. So the WCAG has motion guidelines as well. They're super clear too. So any non-essential moving, linking, scrolling information that starts automatically and lasts more than five seconds and as part of other page elements must allow the user to pause, stop or hide it. And I said it's pretty clear because it's very clear, but it's a lot of rules. So definitely something to think about and to really look into. Even just this morning we're talking or on Twitter I was talking with Kristen Pull about what she wants and she really wants some of these things to stop. And a lot of people are like her where it could be distracting. It could be someone with ADHD, someone with attention deficit disorder, somebody who's just busy, has a lot going on. They don't really want to see this animated SVGs come in and out and then they can forget like why did I even come to this website? Why did I come to this app? What am I doing here? But for other people, that's one aspect of it. But for other people, motion can actually trigger physical reactions. People with vestibular disorders can become nauseous and dizzy when they view this kind of movement. And other people can be triggered even to have a seizure. Obviously that's a really bad thing. And that's more associated with bright flashes and things like that or fast, fast movement which hopefully we're already not doing. But that's something that as designers and developers, we want to be cognizant of what we're putting out in the world and what it's doing to people and how they're consuming it. So I really think of this as one of those areas where you can be fun and have all the cool animations that you want but also be responsible and give your audience another option for them. All right. And then we have a note from Charles. I've got both not seizure but it can mess up my eyes for half an hour but also distracting. Yeah, definitely something to think about for sure. I mean, that could even just be a day. You could even be, you might not be like that every day but some days you just might be like, you're organizing bad camp and you've got like 800 things going on, right? And you might just get nauseous or get confused or just be annoyed. I mean, that's the other part of it. How annoying are some of these, but. So some of the things that you can do, we talked about this manual versus automatic stop but SVGs fall into that same category as other moving content like carousels and videos, right? According to WCAG, they cannot autoplay and they cannot last for more than five seconds. Otherwise you're violating one of the regulations. Again, depending on the conformance level that you're aiming for, your mileage may vary but for the most part that's kind of the general rule. So we talk about the different ways that you can stop it. So one way you can do is like a JavaScript toggle button to play pause the animation. The trick is as most people start playing from the beginning, whereas you really should be doing the reverse you should start paused and give your option to play. That is more, I think more to do with like media though, but SVGs you can play and pause them. You can stop them in that same way with that play, pause, like toggle, especially if you have a lot of SVGs or it's like a large or you have a main feature that's your SVG, that's where that would kind of come into play. Otherwise we can rely on this next one that we're gonna talk about this next media query called reduce motion. So in addition to that pause play option or SVGs can be on a loop that ends, you'll see one that I'm showing in a minute that has a loop but it only goes once. And since it's less than five minutes, it would pass that WCAG regulation. So play pause or a finite animation loop, those are two options. Otherwise this preferred reduce motion media query can help address some of these animations in your SVGs. So this is very similar to that light, dark example where the prefers reduce motion media query. It's gonna check the user's setting for motion restrictions and then it's gonna implement a visual experience based on their preference. So in the case of prefers reduce motion, a user can choose to minimize the amount of animation or motion they see. But like anything like the one we just saw before, I actually as a developer or as a designer, I have to think of what that experience is gonna look like and then I have to code it. It doesn't just automatically happen right now. So, but you'll see just like in the other example, not a lot of code is really involved to get that to happen. All right. So this first one is the default motion that I was just talking about. I'm gonna send you that link to you. It's right here. So I can just show you the code pin. But this one's on a finite loop. So if I kind of redo it here, I'm gonna reload it. It's just chunking along because I'm doing too much here. But you can see that what it is is SEG, writing the word accessibility. This is all again, SEGs, but I'm using some animations, a pretty simple animations. I've got a how long it's gonna take. I've got some strokes involved, right? And some, and the fill that comes in afterwards. Pretty, pretty simple, right? Here's my webkit keyframe and all of that. So you can see right on this side, I have four lines of code to make this SVG happen. And that animation only took 34 plus colors. So pretty minor. And that's with prefers reduce motion, not set. That's the default state. If I wanted to make it reduced, there's a lot of different options that I have. In this particular case, I have the animation set to none, but it could change my animation to be something else. It could be faster, slower, like this one's dash 31 year forwards. I could pop that in there. Let's say 300 or something. So maybe if I really want a very slow experience, right, that's not as jarring. That could be one that I could do or like I did it before I can set it to none. But just like the other one, I have the OS settings. Again, I'm showing you this on a Mac. It'll be different if you're looking at a PC or a device, mobile device. This one is not under general, like the preferred, or like the color scheme one. It's actually under accessibility for this one. And then it's under display and then reduce motion. And so in this particular case, I've got my animation to none. So even if I redo this, unless it reset it, yeah, it'll be none. Sometimes, and I'll show you in the other larger example, you have to, you might have to refresh your screen to get the reduced motion to actually come in. So let's do this one. So now we changed it to, oops, I'm gonna change it to 300. And again, because it's picking up the prefers reduced motion, you can see instead of taking 30 seconds to draw this out, it's gonna take 300 seconds. And so this is, it's almost painful how slow it is, but it's definitely not a jarring experience like we just had, which a little more jarring experience with 30. Obviously, if you've got issues with motion, please, you know, avert your eyes. I probably shouldn't have said that before this demo, but that's pretty slow. So again, you can think about, how is it that I wanna convey this reduced motion? There are schools of thought that say, okay, I'm gonna have this separate, like we're showing here, like a very slow or something that's within that threshold, right? It is the five seconds, correct? And so you could do something within that threshold, or you could be thinking, well, why don't I just do what I did earlier, which is make it none. Why is it that it needs to have that animation, right? Couldn't my reduced motion experience be no motion, right? That is the most safe option. Obviously, you can think about, you know, how again, you want to serve up this alternate experience, but I would encourage you to think about just making it a non-moving experience at all, right? Why tempt fate? Because again, when it comes to vestibular disorders, when it comes to seizure disorders, when it comes to like disorders with motion, right? Motion sickness and that sort of thing, there's not like a one-size-fits-all, just like any disability, but especially in this particular case, something that triggers me might not trigger somebody else. So that's why I kind of would encourage you to think about this stop motion as a your reduced motion. So we go back to our guy in the sky, Camelia in the sky. We're still on the dark mode, that's why we're seeing in the background, but before we saw, and I can refresh it here with the settings, before the reduced motion, what we saw is a gradual change in the color and we saw movement. In the light theme, we have the butterfly. In this particular one, we've got the rocket. When I choose prefers reduced motion on my operating system, I have chosen as the designer and developer of this to just halt the animation again, because I'm still choosing to display the different colors of the chameleon, but this time it's a gradient instead of a changing kind of situation and the eyeball if you notice to stop moving as well as the little rocket that kind of goes by. We have a question here from Jason. Does this reduced motion apply to simple fade, highlight, hover effects? It can apply to anything you want. It's a CSS media query. So you can do anything that you want in that reduced motion, anything that you've already defined as your base theme. Pull down here. Color scheme, all right, there you go. So down here in 256, we have the CSS animation changes for prefers reduced motion. It's just like the light and dark theme. You can do the opposite. You can start with a reduced motion theme and then choose the opposite, but this one seems to go this way more often than not prefers reduced motion is that secondary option. But you can see I have the eyeball, I have the color changing the animation, I've chosen the rocket, the butterfly and all the butterflies, I'll show you that one in a second, but everything I've just decided to stop. But just like I mentioned with the other one with the words, I could make it a even more reduced motion and actually still have that motion if I wanted to. Let's change the color just so you can see. So again, I have to go back to general and then I go to light. And you can see we did the same thing, by we-me-me, I did the same thing with the halting motion with the butterfly. So everything, so you could argue that the experience is different. Obviously there's no motion that is different, but it is very similar. I don't know that you really miss out on much by just completely halting that all together. But again, I could play around and you've got that code pin already for that one as well. So you can play around and see what kind of animation changes that you would like. Charles here, we say alas, WCAG punted on reduced motion so not legally required, but you don't want visitors associating your product with impending ill or confused. So that is a good point. And Carolyn was asking that as well. This reduced motion will not cover your WCAG guidelines. So if you have this in place, this is more about your user and about thinking forward and giving different experience options. But this wouldn't, if you have crazy animations on your normal, not prefers reduced motion version, that's a fail, right? WCAG is gonna come after you, assessment is gonna, that part of the assessment is gonna fail. This is something that I hope that they'll incorporate more in the future, the CSS media queries and allowing that to be potentially something that allows to be passed in the future. That's the exact same thing with the light dark mode that we talked about earlier. If you fail color contrast on your light mode or if you fail color contrast on your dark mode, they would count as separate failures, right? So it's not like one is gonna replace the other. They're gonna evaluate it based on every version of your site, right? And so that's something to keep in mind. I'm not sure I can't look into the future. I'd like for this to be incorporated into these specs. But anything in accessibility, you've got the tech that comes first, right? The whole idea of these prefers reduced motion and the prefers color scheme. Then you have to wait for the browsers to come back in and say, okay, I'm supporting this. That reminds me, we'll go back to, can I support on this one? But then on top of that, you have to wait for AT devices, operating systems, users to even understand that these are settings that they can even turn on on their computer or on their browser. So it's pretty complex. Well, let's do this one. Paper, let's get spell. Reduce motion. So this one's supported pretty well. I think this one's actually better supported. Slightly better supported. We have a few more, I think, than the one we had before. Let's double check that for his reduced motion. Oh, that was the first one prefers reduced motion. And then here's the color scheme. So yeah, it's pretty equivalent. We again, for the prefers reduced motion, we've got a few more. Sorry, I didn't realize that that link just had the prefers part, not the other part of it. All right, cool. If you wanna take a look at my site, actually, if you take a look at carryfisher.com, it's just my personal blog site, nothing too exciting. But it does have both light, dark mode and it has the prefers reduced motion. So again, we're in light mode, eventually we'll load up here. Light mode and then the animations that I have, like I have some animations here that should look familiar. But if I changed it, let's say dark mode and then let's go to sex ability, just any of these buttons and take off reduced motion. You can see this is where that text comes in. And on that homepage, you've got some floaters and things like that. So again, if you wanna see it in action beyond these just tiny little demos and these tiny little snippets, you can take a look. There's a lot of kind of fun Easter eggs in there. All right, I'm gonna pop through these because I did that as a demo. So we're kind of at that wrap up kind of section. I think I'm pretty good on time. Amy June hasn't yelled at me yet at least. So I just wanna leave you with this thought, color, contrast, animation. These are the heart of SVG besides the pattern. So studies report that these visual elements hold intrinsic meaning, contribute to brand recognition, tied to company's perceived value. So this is a really big place where designers and developers can have a direct and immediate impact on their users. So I would just encourage you to bring people not only to what exists but make a new space for them. So there we go. Thank you. Hopefully I wrapped up on time.