Accessible SVGs: Pattern, Color Contrast, and Motion Considerations | Accessibility NYC Meetup Recap

Carie Fisher: Welcome everyone to accessible SVG Pattern, Color Contrast, and Motion Considerations, that's a long title. But essentially, we want to get to the heart of accessible SVGs. And hopefully make them a little bit more inclusive for your end users. Thomas was just saying, my name is Carie, and that's what I'm up to these days.

What I look like is I have shortish, blondish hair, and blue eyes. I joke that I am not a wookie, I am not a princess, I'm probably something in between the two. But I'm in my home office in Wisconsin, southern Wisconsin. So, a shout out and hello to all you Wisconsinites and Midwestern people that love New York so much that we have to join the New York group as well. Welcome.

Alright, so today, just a really quick overview, we're going to be talking about patterns, color contrast, animation, and doing some wrap up and q&a. So if anyone went to the #id24 session that I did on SVGs, I really got into more of the heart of, when do you use an SVG, the advantages, disadvantages? I got into some kind of high level things about patterns. We didn't talk too deeply about it. But it was all more like data and information.

So, this one tonight, I wanted to focus on the same overall concepts, you can't change some of the fundamental foundational SVG nuances and good things about SVGs, but what I could do is walk you through the process of creating an accessible SVG. So that's what we're gonna do, we're going to start out with a demo. So, if you feel like you want to play along at home, you should have access to these code pens, my noticed link to all the slides will also include all of these as well.

So I've not done it like this before. This is a fun experiment, aand let's hope the demo gods are on our side, and I did this in the right order. Alright, so here's the first demo here. So, I heart New York.

Iconic New York logo, I took it from, and you can see right over here where I got it from, the wiki commons. The first step to making an accessible SVG is that you can legally use it, that you've either created it in some sort of drawing program like Adobe Illustrator, InDesign, that sort of thing, or it's something that's in the commons, or in this case, like it's a demo, so I'm not as worried about it.

But I did want to reference where this was. And so if you go to that link, if you get into that CSS, you can grab that SVG, you can export it. And what you end up with is this, that's on the side, this HTML. It's just a bunch of code, and I'm just scrolling through.

Nothing very exciting unless you can read SVG code, right? So basically, SVG is are scaled vector graphics, so essentially they are visual code. So what these things are that you're seeing, with all the dots, they're essentially points on the grid where something has been drawn, or filled in, or shaded. So, depending on what the SVG is doing, typically, like in an SVG, like we have here, we're going to probably be breaking it up into letters.

This is a pretty simple SVG, in the sense of right now, especially, it's simple, because we don't -- haven't added anything to it. But this 'I' is its own kind of component. The heart is. The N, the Y, and they are.

So. if you're building something a little bit more complex, your SVG, or you're exporting it from many of the SVG creation templates, or SVGgator, or something like -- there's a lot of different complexities. But again, going simple, kind of thinking about kind of the base code. So, that's what we have here.

So, I just noted in all of the CSS some little notes. I'm gonna have links in there as well. So, this is like SVG 101, we got something, we exported it as SVG, or we created something as an SVG. We grabbed the code, in this case, I popped it into code pen. That's it.

So, that was step 1. Make sure that you own it, or that you've drawn it, and that you can use it. But now we're going to move on to patterns. We have a lot of pattern options when it comes to pretty much everything.

Seems like we're getting new patterns all the time, as we get new frameworks and that sort of thing. So, what I wanted to look at, and focus on, were just the specific SVG patterns considerations first. So, the first step is pretty simple. Some considerations, options.

So, again, if we've got 15, 20, 30 options for patterns, really the first question I'm asking myself, what information needs to be conveyed about this image? So, just like images on websites, or apps, or whatever, you want to have an alternative description, if it has information, or you decide it's decorative, and you want to hide it from the screen reader? So, that's the first kind of major question is, what kind of information needs to be conveyed?

If we think it's decorative? SVGs, of course, they are scaled vector graphics, by default, most AT devices like screen readers will ignore it, because it's just code. There are some, in some certain situations, especially with IE, that it would focus on it, when you don't want it to focus on. So, you can add some additional ARIA, like an ARIA role equals presentation to hide it. Or you could say something like, ARIA hidden. But just be careful with ARIA hidden, as we know, it hides everything inside of it. So, if you had any information nestled in between your SVG that you did want to convey, it would just be gone. You couldn't see it, couldn't hear it. So, that's a major first question.

Also, this question makes me think, do I have a simple SVG? Or do I have a super complex SVG? So, if I have a simple one, I'm thinking in terms of simple alt, just like you would have on an image. But if you have something like an infographic, where you have a lot of information that needs to be conveyed, the really cool thing about SVG is that you can embed that inside of the actual image itself. But you have to decide, and there's different techniques, or patterns, that you would choose based on whether or not you're doing something simple, or doing something more complex.

I mentioned that, as well, that not only are you asking about what information? You're also saying, What am I supporting? Who am I supporting? What browsers, what tools, what ATs?

But, definitely, AT support is a big consideration. But also, environment. So, I've come from -- so i've been a recovering front end developer. I started off in the CMS world and higher ed. So, we did a lot with Drupal and WordPress and things like that.

And so, within those kinds of frameworks, we're a lot more limited on what we can change codewise, either we're getting it from somebody like a module, or we're getting something from like the core base that I can't modify. And so, sometimes there are limitations. The other part of that is that user limitation. And the user limitation in this case could be even just like your fellow devs. So, can they copy and paste a pattern, and actually change the ID and connect the dots appropriately? Or, are you going to maybe choose a more simple technique to convey your alternative information, because that might be a barrier for them.

So, those are like the top three things. So, I created a matrix, I got to update it, I always like it when I get to go back and check things out. But, what this matrix is, and I looked at it just yesterday, and updated it, and just for you, I added additional three patterns. But I wrote an article about SVGs, and what I did is I compared the different patterns that were popular, that I found out in the wild.

And, as I scroll down here, the first ones are just talking about the img tag. And essentially, if you're talking about that, if you're thinking about that, it's going to behave very much like you just would be linking out to jpg or png, because it's that img tag that is critical in this particular case. I got a little pushback on number 2, changing it, and literally only adding the role equals img.

But when I show you the matrix down below, you'll see why we had to add that, because of the silly little bug that's been half resolved, half not, but it's not going to hurt to add it in there, it is a little bit redundan in theory, we just know that in real life and real practice that it actually is needed for a couple of different scenarios. So, that's why that one's in there.

But we're gonna ignore those today, we're really going to focus on the SVG. What I'm doing here is I'm thinking about our I heart New York logo, and what kind of information I want to convey to my user about that -- the visual information -- to somebody who maybe can't see the logo. And I know it's not super complex. So, I'm probably going to be just looking at some of these patterns, the basic ones.

Using an SVG tag, because I know I'm going to change stuff within the tag, like I know I'm going to add some different color. And I'm going to add some animations, I want to make sure that I pick one of these that's applicable, instead of blinking out, since I have less control on the CSS. These are the extended description ones, and I'm not reading them all out. It's just a bunch of code. But definitely we have that link, I hope, for you all. You can take it out, check it out.

I added, since I wrote about this earlier this year, which was -- everyone kept asking me about ARIA label, because I focused on ARIA labeled by, and described by, in the extended description. So, I went ahead and did an ARIA label for them as well. So those are three bonus ones. The image source, of course, and I won't tell you what that one is, but this is based off of the an old song.

Alright, so the first four again, like I said, we don't necessarily have to look at, because those are img tags linking out to an SVG. And since we want to modify the SVG with CSS, I need to have that in the code where I can modify it. I can change it. I don't -- linking out doesn't do me good, unless I have multiple SVGs and I'm linking out to, but that's a lot of work.

So, in this case, I'm going to be focusing on pattern 5, 6, 7, 8, because we know that those are the basic ones. 9, 10, 11, 12 are more complex. And then 13 is actually basic. It was the one I added with the ARIA label, and 14 and 15.

So, this is a big matrix. I don't know if I can just scroll a little bit. Yeah, there we go. So again, we're focusing on 5, 6, 7, 8. We'll go back up to see what those options are.

But what I want to see is, which pattern has the most support? Which SVG pattern -- again, we could be looking at this one too. If I scroll down, won't move too fast. Spoiler alert, number 6 is awful. Don't use it, I had all kinds of fails.

But you can see that I'm having problems here with number 7 as well. So, I'm kind of scrolling through, it's just showing a description. If it has a green background with a star, then we know that's good to go. If we have a caution sign with a yellow background, then we know, use caution, and then the red with a stop hand, we know don't use that.

And so I added both the color background, but then for people who are colorblind, you have the icon that you can look at it as well. And it's in a table format, so it should be pretty accessible, which I tested it with my screen reader. But I'm not a native screen reader user, so definitely, if you see anything that needs to be addressed, please let me know. Anyway. So, I keep scrolling, because I've done a lot of additional things to the matrix as well. So, combinations of browser and screen reader anyway, you get the point.

So, I decided for this particular demo, that I wanted to use example 5, scroll up slowly, sorry, I have a lot of data in there. Close your eyes. Alright, there you go. I went with number 5, and the reason why I went with 5 is because it was really robust support, and it was super simple.

All I had to add was that title tag, and again, because we don't need to add additional information, that's enough for our particular demo. Alright, so here we go. Here is the one. So, what I did the first time, I just kept everything the same that I got from the export from wiki commons, right? Not a big deal.

This one I added -- and SVGs aren't super accessible right out of the box a lot of times, or they might choose different pattern that you don't want to use. So, that's why you have to go in. And, because it's code, it's not just a design, you can easily go in and modify it, if you're comfortable with code. And so, I added the role of IMG, because I know that's something I need, and then I added a basic title.

So, in my case, I said iconic I love New York logo with black uppercase letters, and a red heart. So, gives a little bit -- that's all I did technically in this section. There's a little bit of body and link text, or at least link styling, but nothing too complex there. And some links.

Alright, so that's a matrix. That was step two. And then we move on to color and contrast. So, right now, we've done pretty basic stuff, we basically just said, Hey, we have found an SVG, let's give it a img tag, so we can tell SpringReader and AT users, Hey, this is an image, and then we gave it essentially an alt.

So SVGs again, they don't have a true alt, like the alt attribute, they don't use that. They have their own tags, is what they're called, so there's title and description, I think, are the main ones. There might be a couple different ones in there that could also convey information. But you can also add things like the ARIA label, labeled by, and described by.

Now we're going to talk about color considerations.

And so that means that -- essential means is that -- if I totally got rid of the image, what changes? Is So, like all things color, we want to make sure that -- and this is newer in the 2.1 WCAG guidelines -- that essential images also must meet that color contrast ratio of three to one.

it necessary? I think one of a really good example are, down in the footer of a website, usually you have like social media icons. And, a lot of times, they just stand alone as icons, and don't have additional text right next to them. So, if they disappeared, would you be able to link out to Twitter, or Instagram, or something if those were gone? So, that's what I think about essential.

There are -- like everything in WCAG -- there are always like outliers and exceptions. So, definitely take a look at that. But you're looking for non text contrast for this particular one. So, let's assume our SVG is essential. We want to definitely meet that ratio.

Mentioned here, there are many, many tools. I won't go through all the tools, or any tools really that you can use. I feel like people can figure that out. But use the tool -- basically, you want to make sure that you are testing them.

The one really cool thing, and we will talk about that inside of that step 3, is @prefers-color-scheme, and that's supported by 92% to 93% of all browsers. And so the really cool thing about that, and I'll show you a demo real quick, is that, okay, it's highly supported, but it's also giving your users an alternative experience. We see it a lot. We've heard -- probably you've heard about, like, dark mode, light mode. That's essentially what @prefers-color-scheme is, it's a super easy way to add CSS media query to your code, and essentially give you a whole brand new experience, almost the alternate experience, if you're really going from light to dark.

There are no -- you can also go light -- dark, light to dark. So, depending on how you start, it is really important to note that you can't say like, the dark mode is your accessible mode, they both have to be accessible. So if you're talking about motion, if you're talking about color contrast, you're talking about alternative information for the visual -- non visual users and low vision people, then you want to make sure that is on both your dark and your light mode.

So, hopefully, that makes sense. Alright, so here we are on step 3. And I'm actually in dark mode, I was going to change it over. So, you can see already between number 2, and number 3 here, that it changed from the light backgrounds and the dark words to the opposite.

So, this could really look like anything that I wanted it to. Now we finally start to get a little bit more into the code. So, the first thing I definitely do is I go through and I clean out anything that I'm going to be using. So, originally our IDs, we had some really interesting IDs, like numbers and letters, nothing that's substantial, or that I know, hey, that's the heart. So, I go through and I update the IDs as needed on the areas that I'm going to be updating.

So in this case, I added an ID of heart, or changed it. And then I recreated the style that was already inherent to that SVG, and I moved it over to the CSS. So, those styles are often just baked right in, and it makes sense, baked into the SVG. Because they can be used as standalone images, that you just link out to, so they need that styling in there.

But if you want to modify the styling, like we are here, then we need to take those styles out, and we need to pop them in the CSS. So, we can actually do something with it, right? So, I just renamed my IDs. And then I gave them some styles over here, so it replicates exactly what we had before.

And then I added a @prefers-color-scheme dark. So, what that essentially is doing is that I have made it -- I have made a light mode, or that's my default is the light mode. But I want to, when somebody in dark mode, change it to the reverse, so I'm going to show you real quick, switching over. So I am on a Mac, and I go to my general settings, and you might have seen this, if you do auto it usually defaults to whatever is presented first. So, if you start out with dark, that's what it'll show you.

So, I just pressed my light button here -- throw this away.

And you can see that was the original style, and then just by changing my operating system option, so I'm saying, I prefer as a user to have dark mode. And then that's why it swaps. And like I said it could be -- we can make this any color we want to, right? We could come in here and go purple or something, and we could change whatever it is that we want to do, as long as we pick the right hex value or name.

So we can play around with fill, f-i-l-l, not like my coworker, Phil, but the other fill, that's what you'll see a lot. So that's the something that's adding the color. So, in this case, I'm saying, Hey, this is the color, I want it, and then opacity, like how solid I want it to be in stroke, it would be like that outline that's on there. So that's like the general basic SVG options that we see a lot.

But there's actually a link in this one up here, to this one. Yeah. CSS tricks. There's a really great article about all the different styling options for SVGs, especially if you want to keep it simple, and keep it in the CSS, and that's a really good resource.

All right. So we talked about pattern choice. We talked about color contrast, and all those considerations. And now we're moving on to animation.

And animation could be simple, like a small motion, it could be something complex. We're using really cool SVGs where parts of them move, or different things do different things, right? It's pretty amazing some of the complex animation styles that are out there that are available to us with JavaScript, of course, and CSS, even.

So, the first kind of, number one, I would ask, is this movement necessary? So these are the top three things that I think about when I talk about SVG animation. So, really be selective, do I really need that animation? Do I really need that micro movement? And then you pause, and you're like, do I really need that?

Most of times, you don't really need that kind of animation. Even if you don't have problems with movements on the screen. It can be annoying, too. So, just pick and choose. Don't make your whole site SVG.

I'm laughing because, like, my profile site and my demo site has got a lot of SVG funness. But I also do have that alternative of @prefers-reduced-motion, which we're just going to talk about. So, WCAG of course, has some rules around motion, and flashing, strobing, that sort of thing. So, we hope that the animation isn't so great, that you're even in that strobing or flashing range, when that's serious stuff, that can cause seizures, that can cause migraines, or like really physical reactions, you can really hurt someone. So, we have to be really careful on that.

But motion is secondary, and as important as that kind of flashing, because you really can trigger someone to have motion sickness, or vestibular disorder, they might get a migraine, right? There's a lot of things that motion... Animation can be difficult also for people with attention deficit disorders, where they can get distracted, and forget why they even are at your site. So, definitely look at the WCAG rules after you've decided, hey, we really do want this.

And last, I already talked about that, @prefers-reduced-motions, supported by 94% of browsers. So, it's just a little bit edge across. So, it's really funny when I first started learning about SVG @prefers-reduced-motion and color-scheme, I think we were in like the 80s, or 70s, even like late 70s of browsers, saying yes, we are going to support this. So, 94 has come a long way in a very short amount of time. So, it's really promising.

And there's other media queries that are out there that are, hopefully maybe, going to be implemented soon. And by soon, how the pace of W3C and everything and all the rules, that takes a little bit of time. But there's some really interesting, promising things beyond those two. Alright, so step 4, trying to go through, so we can chat more at the end there.

So step 4, we're going to add the movement. So, if you see this, I'm still in dark mode. Let me go ahead and switch back to light mode for you.

Got some sort of bar in there. Hmm, let's refresh that, see if it goes away. Ah, there we go. When in doubt, right?

This demo is super simple. And again, I will say, in case anyone has vestibular disorder, or some sort of motion sickness, that there is a very slight movement to the color. So, the color on the I heart New York logo is changing from the traditional red color. And it's cycling through a rainbow of colors, because why not add a rainbow.

But the major things on here that I've added is that animation, you'll see the animation below. So again, this is simple CSS animation. I called it rainbow, I decided I wanted it to be going for 25 seconds, that's linear and infinite. So, that means it's going to go in order, and it's going to go on forever.

Which according to WCAG, as we know, we don't want things going on forever, we definitely don't want to loop that much. So, here's the keyframes. And again, it's what it's saying is, at this 0% of that 25 seconds, you know, fill that heart with this color. So, this first color is like the base red that it started with. And then it kind of changes, I probably should have said on the side here exactly what color the rainbow is that ROYGBIV.

So, it goes through that process all the way down to the end, and then a cycles back up because it's infinite. If we had it not on a loop. If we had it finite, then it would only cycle through once, and then stop. But again, we're exceeding the guidelines for WCAG movement, because we're exceeding that five second rule. And so, by that, we need to have giving our users options to pause, stop, or hide that kind of movement.

There is the alternative, or an additional way, that you can do it, is with the @prefers-reduced-motion. So, on step 4, we've added the animation. On Step 5 what we're doing is actually giving our users another option to stop the animation. So, if I scroll down here.

Animation, we saw our -- Okay, yep, there's our color scheme dark, but above that we have that media @prefers-reduced-motion, and reduce. And so if I went into my settings again, we grab it on settings.

Zoom has too many open, let's see, see if I can do this. Sorry, the toolbars in the way, There we go. So, the @prefers-reduced-motion is not in the general setting, it's under accessibility, and it's under display, and it's under reduced motion. So, immediately, when I press that, we saw that the heart color stopped, it just went to the default.

And what it's doing is, it's ignoring all the animation because we told it to, and it's defaulting to that heart color, which is the red. Used to be that you had to reset your page, like to see the change in the motion. But now it's pretty instantaneous. But if you don't see it right away, just do a refresh on your page, it could be partially that.

So I'm going to go ahead and reduce that motion. It's really interesting. Tatiana Mac had a really interesting article, a year or so ago, about flipping the idea of the starting point. So, instead of starting with animation, and then saying @prefers-reduced-motion, reduce, we could do @prefers-reduced-motion, no preference.

And so we would start with no animation, but if someone in their settings had not checked that box of @prefers-reduced-motion, then they serve up that motion. So, it's a different way to think about it, and I really like that kind of concept that, why are we starting with the animation? Like we've already established that it's annoying for some people, make other people sick, so let's maybe think about flipping that on its head, and really, maybe, we want to start this one next time with the animation stopped, and then add it as we wanted, or as the user wants.

So that's the step 4, and 5, and I broke that up so we can have a little bit more space to see that difference of that flip, and then the add. So, it's an interesting concept, I know, it's a little bit hard to get your head around it, at least for me it was, when I first heard of that concept. Alright, so I went a little bit faster than I probably should have. Because I've already gotten to the the q&a, maybe that allows for a little bit more questions, or I can dig into the code if someone's interested a little bit more. But I want to make sure I have plenty of time to do demos, and talk about any of that as well.

Oh, oh, sorry, I do have a wrap up. Patterns, a lot of pattern options, picking one for your environment AT supports. And that color contrast, you saw that with just a few more lines of code, we can accommodate more of our users' visual needs. And, of course, animation, same kind of concept, we've added a little bit more.

And we've really enhanced the experience, because that's really, it's all about. So, it's like Tim Berners-Lee was always saying, Thing is about the Web, and the Web, as I envision it, we've not seen it yet. The future is so much bigger than the past. And that's where I feel like SVGs, and just user choice in general for web and app, that's the future. And this is one small step towards that brighter, bigger future. Because we're giving at least one more choice. Ultimately, well, we should have that in the hands of the user 100%. But, right now, we're just kind of -- we're building it slowly. So, hopefully, in a couple years, we'll be a little bit closer to that.

Awesome, thanks. You can find me on Twitter and LinkedIn here. But yeah, Thomas, if you have any questions, or want to start that part of it, let me know.

Cameron Cundiff: Awesome. Thank you, Carrie. And I have at least one question queued up from Thomas, the man himself. Thomas, would you like to go ahead?

Thomas Logan: Yes, sir. Sure. Thanks. Thanks so much, Carie. That was excellent. And I love New York too.

I wanted to ask you about -- so you showed that pretty slick flow from, on the Mac, turning on the dark theme preference,

Carie Fisher: Sure.

Thomas Logan: and then it updates. Does that? Is that always done in the operating system on Windows, iOS, Android, Linux? Do you know if that has that same connection?

Carie Fisher: Yeah. So I have an iPhone. So, I can definitely see some settings in there. Sometimes they're app specific or site specific as well, so it depends. But there's all kinds of options. I think Windows was one of the first to have the high contrast mode built into the OS, it was one of the first ones. So, now, Apple and some of the other companies are catching up. So, you can definitely have these different experiences. I just showed you, obviously, the version that I have on my desktop, but I think people are responding to that question too, there.

Cameron Cundiff: Another question. hand raised, from Mark.

Carie Fisher: I know Mark. Hey, Mark, how are you? Mark: Good. Hey, I think Thomas may have asked the same question. But I'm really asking generally, if you've designed that SVG, and you're doing responsive web, and you're reading it on a mobile device, do the accessibility settings also pertain to that reduced motion as well, and they'll work, or do you have to be thinking about anything else?

Carie Fisher: So for both @prefers-color-scheme and @prefers-reduced-motion, that you have, as a user, you have to go in and choose those options for you to see that alternate experience. But, as far as the pattern is concerned, you would hear the same thing that you would on desktop, if that makes sense. So, you're talking about just like the alternative information that you're getting, that would be the same experience throughout, you don't have to turn anything on for that. Obviously need to be using like a screen reader AT device, but you would hear it the same, but that those other two are dependent on the users checking the box, essentially.

So, you are as a developer, and a designer, deciding these are the two experiences I want to give for color. These are the two experiences I want to give for motion. And, as a user, you get to choose based on your settings, which one you're gonna encounter. Does that make sense? Does that answer makes sense

Cameron Cundiff: Thank you, Mark. Carie, there's a question from Kaige Zheng. She said, thank you, and this is a good entry point for her as a someone new to accessibility. How does she measure color contrast ratio in web content? I mentioned Stark and other plugins, but maybe you have other resources.

Carie Fisher: Yeah. So it depends on, if it's in code, or if it's in a design that's not hard coded, right? I use the accessibility, what is it called, the Color Contrast Analyzer from TPGi. I think that's a really great asset. A lot of the programs, the design programs, have some of those color contrast checkers built in.

If you are going the code route, or you have a code pen, or like a style guide, or even something local, there's a lot of different options that you have, like a lot of the automated checkers will catch certain things, they're only going to -- like a hex on hex or calculated hex on hex value -- it's not going to check it against a gradient, or against an image, so if you had text or something on that.

So, in the case of SVGs really, because it's an image, like if you don't have any text or anything that's in it, you're really counting the border against the background. And you want to spot check if, like that changes somewhere along the line. So, it is part art, part science, but that one tool from TPGi is golden, because it can test things that automated checkers can't check. But, simple things automated checkers could check, or if you know the values, there's a lot of plug and play options.

And palette generators. I don't want to overwhelm you with all that, but maybe next time I do this talk, I'll definitely bust out a few of those. But there's a lot of different options for color contrast.

Cameron Cundiff: Awesome. Thank you, Carie. There... Does anyone else have questions? I have a question.

I want to give the floor to the attendees.

Carie Fisher: Yeah, and Doug actually made a good point too, that I didn't mention this, but I mentioned #id24 Is that the @prefers-reduced-motion, you can give somebody an additional way to turn it on or turn it off outside of your iOS. And the same is true with the dark mode light mode as well. If you can do like a JavaScript toggle, essentially, that it's utilizing one of the themes versus the other themes, depending on how you want to offer that up. That might be an alternative, or that might be an additional -- I think it gets a little confused. Sometimes I've seen some operating systems, like typically your operating system will be secondary to whatever is on the screen. But it depends on the operating system. So, I don't know if Doug has run into that either, but sometimes my preference is ignored

if I'm using the the toggle on the website, for instance, which I guess is probably what you want it to do. So you might have some conflicting options at times. Now, I hope that makes sense.

Cameron Cundiff: What kind of animation, or like data visualization like dynamic graphics, work have you seen done with SVG in the wild, from an accessibility standpoint?

Carie Fisher: Yeah, accessibility standpoint, I think one of the the major players is Highcharts. And the way that they do data visualization, Doug Schepers, is on the call. And he is actually an expert on that topic as well. That's a little bit above my paygrade. As far as the dynamic part, that's a lot of JavaScript that I don't want to do, but it's really interesting what they do. So Highcharts, I know was worked with Lucy Greco, then the inventor of Highcharts, or creator of it, and they've done a lot to help support dynamic SVGs. A good example would be like if I have a graph with a bunch of data points, but I'm using a screen reader, how do I convey that much information and dynamically changing information to somebody who can't see the change visually, but can hear it? So

maybe that's a topic for Doug or somebody else like that to come in and talk more about that, but it's fascinating.

Cameron Cundiff: We are due to have Doug back, and Highcharts is a really good call out. I'm also curious about dynamic content, visualization, focus management, these are all things that we can do with ARIA and tabindex and what have you. So, it's really good to see that Highcharts is working in that space, especially as more and more content is digital. In an education context, for example, that's really important.

Carie Fisher: Yeah, super popular platform still to use. I forget what the percentage is, but it's used by a lot. There's some other players as well. But that's who I go to first.

Cameron Cundiff: Awesome. What are some of the challenges to using SVG in this context? What use cases do you have for SVG that are particularly robust? Obviously, icons is one, logo texts...

Carie Fisher: I think SVG, all the things, do it. Unless you're talking about photographs. Again, if you check out the #id24 talk, I really compare, like, the pluses and minuses to the different formats. And they're -- the chart that I created, oh, man, I can find it real quick -- but it's a checklist of resolution.

SVG, because, again, its code, it scales so well, and in any platform, any device, rate, it's not dependent on a lot of things. Sometimes it can be smaller weight, depending, again, on how complex it is. So, that might be a plus. You can have additional information, like you could -- in theory, don't do this -- but you could write a whole novel and pop it into an SVG and then serve it up to people on AT devices. So, you can jam pack it with all kinds of really great information.

Plus, as we saw today, you can give these alternative experiences. If you wanted to do that with an image, let's say, I'd have to create a dark mode and a light mode of that image, and then link out to the appropriate one, which if you're doing one image, that's not a big deal, but if you've got 1000s of images on your site, you've doubled your work. And never mind animation, because animation, you're probably using like a GIF, and so then you're creating a completely different file for that kind of animation that you're wanting.

So, I think SVG solves a lot of problems when it comes to recycle, reduce, and reuse, or something, I don't know. But it's like one of those kind of concepts, where images, and GIFs, and JPEGs, they have different pros and cons, but definitely fidelity and resolution, and the adaptability of SVG is unparalleled between all the image formats that we have right now.

Cameron Cundiff: Awesome. Yeah. I'm a fan of SVG. I think I feel your enthusiasm. So I appreciate it.

Carie Fisher: Yeah. I was joking this morning with Ben Myers, and we said, there's dozens of us that love SVG, so... I think I'm just passionate about it because it's, like, how often do you get to see visual code, and have it working for you in such a complex way? It's just phenomenal. I'm impressed.

Cameron Cundiff: Yeah.

Carie Fisher: And they're old. It's like 1999. It's not...

Cameron Cundiff: Like an XMLS attribute, 1999.

Cameron Cundiff: So, what one of the things that is actually interesting about SVG, and I'm just riffing here, is that it's just vanilla. It's not HTML, but it follows like browser standards that adhere to some HTML behaviors. So, for example, something that's cool about SVG is that you can link to a section of an SVG.

Carie Fisher: Uh huh.

Cameron Cundiff: So, if you add an anchor to an SVG element, then you can deep link into a visualization, stuff like that, that just blows my mind. So, I'm with you on that.

Carie Fisher: Obviously, for demo purposes, I wanted to just show something pretty simple. And that everyone could come away from this, and then maybe look at the code pen after, and just really pick it apart, instead of going fast, like I did, but just see like the differences and comparing the, like, steps because it's not rocket science, and you all can do basic SVG integration. And it just takes a little bit of time, but like anything accessibility, right, you learn how to do it once, it becomes a trick in your tool bag, and you don't have to really think about it anymore. It's just something that you do. And you've given more options for your users, which is always a good thing.

Cameron Cundiff: Related to that, what tools do you know of for exporting SVG, that's like more editable than others, right? Because you got some wiki commons, if I wanted to get something out of like Illustrator or Sketch or...

Carie Fisher: Yeah, as long as you can export as an SVG file, like for Illustrator I build a lot of SVGs from scratch, and I just export it, and you can then open SVG, like -- I cheat a little bit, I open it into the, like a browser, and then I right click inspect, and I can grab it then..

Cameron Cundiff: Oh, cool.

Carie Fisher: Otherwise, when you export it, you can actually press a button, at least on Illustrator, this is like, show code. So, depending on what platform you're using, you usually can grab it pretty easily, and then you can do whatever you want with it. So, again, anything that you're exporting it from, is probably not going to be accessible out of the box. It's probably going to give you weird ID numbers and letters, and you probably want to make it a little bit more user friendly, if you're going to be modifying it within the code.

Because there's -- trust me, there's been times where I get to an SVG, and I'm like, Okay, which one was like P1280, like, which one again was that? And then you have to reverse engineer it to figure out what you're modifying. So, it's easier if you just say, heart. And then in your mind, hey, this is associated with this particular shape of the SVG, because that's essentially what you are doing with SVGs is like, putting together a bunch of shapes. And depending on how they lay on each other, you're gonna see different, you know, outcomes. So, that's the short and long of it.

I know I should have demoed a little bit longer. These are all great questions, but putting me on the spot, I'm sure I'll think of something later. So, definitely follow me on Twitter or LinkedIn and let me know what I forgot. I'll definitely add it the next time I talk.

Cameron Cundiff: Thomas, do you have other questions on your mind? Do we have any other questions in chat that I'm missing?

Thomas Logan: Yeah, I just have one last one, that's maybe also a discussion one too, but I think it's interesting, the name @prefers-reduced-motion, like, reduced versus no motion, as a discussion point. And I'm just curious, if you had any thoughts on if you were going for reduced, like what's appropriate to be reduced?

Carie Fisher: So I think you will always do well, if you decide to produce no motion. So, reduce meaning none. But I do know there are some users that like a little bit of motion, or slowed down motion, so I can't talk, obviously, for them. But I err on the side of caution, because why would I want to make someone sick, who was like, trying to buy my product or, you know, check out my blog post or something? Like, I don't want to do that. But I do like the idea of what Tatiana was talking about, flipping that on its head a little bit, and serving up as the first option, no motion, and then adding the motion on, if I had not checked that. So, it's a nuance, but it's really important. But yeah, that's what I think.

I hope in the future, maybe we'll have a middle ground, but right now we only have -- it's pretty one or the other. There used to be one, I think that was on @prefers-reduced-motion, that had the middle ground. I can't remember which one that was. I'll see if I can find it real quick in my notes.

Let me see. No, I don't remember, I think that was on color contrast. On color contrast, they have an additional kind of third one, but it's only supported by 12% of the browser, which is like no preference on your color scheme. So, for reduced motion, we only have that, the two, that I know of.

Thomas Logan: Yeah, I think I've observed ones where, more on the Mac, but the difference is so subtle, and it's not actually like how you're explaining it. So, it's almost like I can barely tell that it's a reduced motion. To the designer it felt reduced, but it's still, to me, like animated. Cool.

Carie Fisher: Yeah. When in doubt, what's the harm? What's the harm in making it not have any animation, but there is a harm to having some animation, or full animation. So, I don't know, I'm not a gambler like that, I guess. Yeah, just one thought.

Thomas Logan: Yeah. Thanks.

Carie Fisher: Cool. Thank you so much for having me on. And, hopefully, it was entertaining, or maybe educational, for a few people listening. And, yeah, there's plenty of people in the SVG space, so definitely check them out as well. So, lots of really smart people.

Cameron Cundiff: Yeah, and Carie has -- if I can advocate on your behalf a little, you've done a lot of writing on Smashing Magazine about this topic, great resources. Carie's super active in this space, so please check out...

Cameron Cundiff: Do -- have you written a book yet, Carie about accessible SVG?

Carie Fisher: I have not, I don't know that there's a book to write but...

Cameron Cundiff: If and when you do, we'll be looking for it.