Adaptive SVGs for Accessibility, Responsiveness and More

Transcript

[00:00:02] Ben: Howdy, howdy y'all! Happy Tuesday. Welcome to Some Antics. I'm Ben. I host Some Antics, a weekly show about building great user experiences for the web, with a focus on accessibility and/or core web technologies. Today I'm joined by Heather Neff. Heather, hello! Welcome to the stream!

[00:00:18] Heather: Hi, everybody! It's really a pleasure to be here. I'm honored.

[00:00:22] Ben: I am excited to have you on! For folks who haven't seen you around, would you like to introduce yourself?

[00:00:27] Heather: Yeah, so my name is Heather Neff. I've been a graphic designer, creative director, and marketing director for over 20 years. And about eight years ago, I tore a ligament in my chest and it became really, really painful to use my right arm, so I became a voice control user and then adapted into becoming obsessed with accessibility. And that's when I stumbled into making SVGs accessible. And as a graphic designer and logo designer, branding expert, we had been using SVGs for years to become better logos online, to be crisp and clear, et cetera, et cetera. But when I discovered they could become accessible, I decided to rebrand my company and go international to offer a service to make accessible SVGs, to also design them from the very beginning to be accessible, but also making them into very accessible SVGs that respond to different media queries, and we'll go into that a little bit further. But we actually started a company called Equivalent Design. And our tagline is "Equity through graphics," because we really wanna be as inclusive and as accessible as possible.

[00:01:23] Ben: Absolutely. So… Equivalent Design. Your graphics are really, really centered around the technologies of SVGs. Can you talk real quick about what makes SVGs a great candidate for accessible and responsive graphics?

[00:01:40] Heather: Yeah, so most graphics are PNGs and JPEGs and so forth. They are pixel-based, so if you do try to enlarge them, they become fairly grainy or pixelated, which can be a problem for low-vision users, 'cause text will get all grainy and so forth. They can't read them. So when you're in an SVG, not only is it code, so you can basically do anything you want within it, they can scale as a scalable vector graphic indefinitely, so they stay crisp and clear for anyone to see the best graphic as best as possible. They also respond to media queries, which is really, really important. So we're gonna be showing today a demo of what they can do, which is they can use selectable text, they can change colors. They respond to forced colors, which is an amazing accessible tool. PNGs and JPEGs will not respond to any media queries. They don't respond to personalized settings as well. You know, SVGs can also be animated and interactive. So they are very powerful and they have all kinds of technology behind the scenes so that they can do… pretty much anything you can dream up, the SVG can do, whereas JPEGs and PNGs can't.

[00:02:40] Ben: Good deal! Alright, so you've kind of put together some slides you wanted to show off. I am showing your screen now, by the way. So yeah! I guess let's dive into it, if you're ready.

[00:02:53] Heather: Yeah, so I wanted to go over first about making graphics accessible because of the fact that we're gonna talk a lot about SVGs today, but also you need to design the graphic itself to be accessible, and a lot of people kind of skip over that really important part.

So our company was founded to make sure that we do inclusive design, which is designing amazing user experiences with graphics, specifically around showing different races and genders and ages, as well as making sure that you design for different disabilities, such as dyslexia or for colorblind users. We also really focus on low-vision and blind users by also offering up really good contextual descriptions, which of course is an art in itself to make sure that you're doing a really good job of just explaining what is in the, you know, visual side of things.

We also make sure that we adhere to all WCAG compliance, so all of our graphics and designs are going to be Level AA or above. And we also are just really, you know, really focusing on the user experience. We also make sure that everything we design is also looking at the future WCAG 3 Accessible Perceptual Contrast Algorithm, or the APCA, so that you future-proof all the graphics that you're doing now as that might be a few years out from the distance, but you might as well be compliant as much as possible.

So we're gonna talk a little bit about the graphics because, you know, SVGs are all visual. So making sure that everything you do is going to be accessible starts with the basics, which is of course having high enough contrast ratios to be WCAG compliant. We also do something else, which is converting all of your brand colors into hue, saturation, and lightness, or HSLs. Because we're gonna be using CSS variables to change those colors, they need to be in HSL format. So we're not actually using hex anymore, but we're changing your stuff over to hue, saturation, and lightness. They do shift a tiny little bit, so we wanna make sure that you approve them before we do any graphic changings, but it's really important to know that we're actually going to be shifting them into that format.

We also make sure that we test with colorblind simulators to make sure that any graphic is not dependent on color alone, that you're not relying on anything that would be confusing for, you know, someone who has different types of vision. So, these impairments can look like this, so you would never wanna rely on color. So you would wanna use symbols or shapes to make sure that colorblind users can actually tell things apart.

We also talk about infographics a lot. So we do a lot of SVG infographics that are intelligent to respond to media queries and so forth, but the actual design should make sure they utilize patterns and textures so it's a lot easier for everyone, not even colorblind users but all cognitive levels, to understand what's going on. And also you wanna test all of your graphics, before you export them, in black and white, because if it doesn't work in grayscale, it doesn't really work at all.

And then of course, when you're choosing any typography or typefaces, our SVGs can actually use text within them that is actually selectable and indexable. So when you are using infographics that do have some type of typefaces, we just wanna make sure that people realize that you not only need a 10:1 contrast ratio for anything that's text-based, but you wanna have adequate letter spacing so they're not touching or too far apart. You wanna make sure there's visually unique characters as well, so that they're not mirroring such as, on screen, I have a font of Gill Sans where the I, the 1, and the L look identical. And then we show it again in Verdana. You can see that there's very unique characters. We're also showing the letters d, b, q, p in Cabin and also in Minion Variable Concept, and you can see that having mirrored images of the same letter will be very difficult for dyslexic users. So try as best you can to find unique characters, which helps everyone understand it faster, but especially dyslexics, it's much easier for them to read something.

Typesetting. This is more graphic design as well, but you wanna make sure that everything you do is going to be easy to digest, which means not having any paragraphs or, you know, sentences longer than 80 characters. Always left-align and never full-justify if you can. And making sure there's adequate line height, like 1.5 line height or double spacing between paragraphs. And really try to avoid all caps, unless it's like an <h1>. Low-vision users also have a really hard time with italics. And of course every user would confuse an underlined text with a hyperlink. So those are just basics not to include in your infographics you're designing.

Languages stuff. Of course, use plain language. The contextual descriptions are very, very important to know that if it is a graphic that's just decorative, you hide it from screenreaders as well. And if it's not something that's decorative, you really need to understand why is it in the website or in your, you know, PDF or wherever it's located. You need to describe for a low-vision user what's actually happening within the graphic and making sure it makes sense and getting all of the most important information to them so they have the same experience as a visual user. You also wanna make sure that you're avoiding, you know, technical jargon, if you can, so that people have more accessible text within that. And if you're doing something for the public, you wanna make sure you're doing something suitable for the 8th grade level and just keep it really casual and simplified.

So we're gonna be talking a lot about SVGs. I personally think they're the future of accessible digital graphics, and there's a lot of reason whys, but here's just kind of some of the basics.

Just a quick review, pixels versus vector. Pixels, of course, raster-based images that have a set resolution. Each pixel is a little dot of information. Whereas vector graphics are built in a program like Illustrator and use points and lines and coordinates and math to create the graphics.

So in Illustrator, what's actually happening when you're designing a vector artwork, is that these points and lines are actually, in the backend, making XML. And this XML is going to be full of some stuff that doesn't need to be on the web. But what we do as our company is we take the XML that's exported from Illustrator, which has different, you know, coordinates and shapes and colors behind it. And we take the XML and that is the basis for all of our scalable vector graphics.

So to make them accessible, we do a lot of cleanup and then we add a lot of different code into the backend of the XML. And these graphics then can be really small in file sizes. So they're way smaller than any JPEG or PNG. Although, they can get very complicated if you have a very, you know, detailed infographic. For the most part, they're very, very tiny in file sizes, like 10 kilobytes. They work across all major browsers. They allow for animation. And they're also anything that's vector-based, so logos, icons, illustration, and infographics can all be these accessible SVG files.

So the descriptions, and a little bit about SEO. They're a little bit different from regular graphics because within the smart SVGs, you can actually have selectable, searchable, indexable, SEO-friendly text. They can also be used with a keyboard and can be navigable in both directions and so forth for a screenreader to understand what's going on in the information of the description. They can contain unlimited characters, which can be also a nice feature versus just, you know, alt text just sometimes doesn't allow for that. And also, Google knows that it's accessible content and will actually give you a little boost in the search engine, which is great for your SEO.

Also, they respond to browser media queries, which is fantastic, which is meaning that they're listening to the OS system of the user. So they will actually listen to the personalized preferences in the backend of the computer. So, a lot of users like to surf in dark mode, which is a great accessible feature, especially for people that have some type of vision impairment that prefer to have dark mode on. These graphics will instantly respond to dark mode. They also respond to contrast themes, what used to be called high contrast, and they will actually change color to match what the user has selected. Of course, right now this is only on Windows, but Mac, I heard, is actually working on their own contrast themes as well. Also, Prefers Reduced Motion is something that you can program into the SVG so that if a user has an issue with animation, they can either code it to reduce it completely, or make sure that it's going to be less annoying for some people and/or not cause any issues such as headaches.

They're also responsive to screen sizes. So we actually will show an example of a logo that's responding to different sizes like a mobile device versus a desktop. That actual graphic will rearrange itself, and it's the same graphic as well. And just kind of a gentle reminder that PNGs and JPEGs don't respond to these media queries making them much more accessible.

So we do a lot of media query mockups. So if you're gonna be doing an accessible SVG, we wanna make sure the company realizes that it's going to look like a certain way in light mode. It will look differently in the dark mode, so that responds to be in a dark mode. On screen, I actually have a light mode with a dark, kind of pink cat. I also have a dark mode with a light pink cat. We're also showing what it would look like as a mockup for a high contrast theme or forced colors, which would… normally we use a dark background with bright yellow text, 'cause that's the preferred colors for low-vision users to have a really kind of garish contrast so they can actually see what's going on. So, actually I show kind of an example of making sure that people know how the graphic would respond before we code anything.

And we also want to talk about how should have a dark theme before you install any of these SVGs, because it's going to really be an accessible feature if it does respond to dark mode. One of the things I like to point out as an accessibility advocate is a lot of people that have really poor bandwidth might only have access on their phone, and being in dark mode will actually save up to 28% in energy consumption. It's actually a green feature. And as a design company, we also encourage everyone to start thinking about designing their PDFs and their website in both dark mode and light mode. A lot of the marketing materials should be served up in both such as an example as like, you know, a talk should be light and dark. And right now, what we actually wanna do is also offer up the light mode because it's really good for people who might want to print without wasting any ink, because it gets rid of the backgrounds on the screen.

So, one of the cool things about smart SVG is you can also do a smart SVG favicon or a bookmark icon. So right now, you actually are able to do something where the bookmark would actually change depending on if the user's already in dark mode, which would be great for your branding to stand out. Note that you have to have a fallback PNG, 'cause it doesn't work on all browsers, but it's something that's hopefully gonna be adapted over the next few years to be on every single browser.

And again, a little bit more about contrast themes. A user can choose a really high contrast, they can choose a very low contrast, or any color combination that they happen to prefer. So the graphics that we're doing can actually change color to any type of color combinations. On the right I have, on a screen, I have a kind of a… there's a standard contrast theme called Desert, and it shows something like this. This is a low-contrast theme where the graphics would then actually turn into, like a tan and brown. And those kind of are great for people who have, like, astigmatism or, you know, something to the effect that would make them want to not be in a high-contrast environment.

[00:13:28] Ben: From what I understand, like, that's huge for, like, people who get migraines, for instance.

[00:13:33] Heather: Mm-hmm!

[00:13:33] Ben: Like, many people with migraines will choose for a low-contrast theme, just to not overwhelm them.

[00:13:41] Heather: Yeah, there's many different reasons why. I actually read about why a woman who has astigmatism can't do dark mode at all, 'cause they're an instant migraine if she's in dark mode, which is the opposite of a lot of people. I personally have photophobia, an eye disease that causes supersensitivity, and that's why this particular presentation is in dark mode is that. You know, the preference is really an accessibility feature, right? So we have to allow the user to choose what they want to do. And I think 50% of all low-vision users do choose to do forced colors. So that's a huge amount of people. Millions of people get into this forced colors stuff on their PC to choose how they wanna view the internet and their entire OS system.

So low-vision users tend to like a dark background with a very bright foreground color, so we do a lot of mockups with a dark background and a bright yellow so you can kind of see how a really low-vision user might get really close to their monitor. And this is an example of the colors that they can actually see. If it's on a normal view, they might not actually be able to read your logo or your infographic, so we really encourage people to see how the benefits of forced colors could really enhance the user experience for low-vision users. We do note that the brand or your logo will change color. For example, our logo's in this kind of bright yellow on screen. A brand can choose if they respond to this forced colors or not. This is something you can control in the backend of the code. We do encourage companies to allow the forced colors, because the percentage is a lot less than the average public percentages. So it's really important for those low-vision users who want to see what's going on to see your brand. There's also the ability to, like, you know, control what happens in forced colors. But this is something that we actually really want people to listen to because it is a great accessible feature to cause better user experiences.

So, one of the cool things that these SVGs do is they do respond to different screen sizes, so tablet, desktop, mobile, for example, and they will actually change the format they are, even though it's the same file. They respond to dark mode. They respond to forced colors. But they also… the same file responds to something like a mobile design. We are the first company that we know of that is offering this as a service to design responsive and smart SVGs. We're also really focusing on the mobile-friendly infographics — because on screen, I have a desktop kind of looking infographic where it has a kind of disability statistics and what will happen, the same graphic, if it's on mobile, will serve up a mobile version of the same graphic and rearrange its content so that it's actually mobile-friendly. And this one is a really kind of great way to think about how you can actually use the screen sizes to really design something to accommodate the fact that it's more of a taller, vertical design all of a sudden, which is a great user experience on mobile. So that's a kind of a cool feature.

One of the other things is, of course, low-vision users and many of us who are aging tend to magnify our content online just to see what's going on and to read things. I personally have to magnify my content as I do have a vision disability. Since it's all math-based code behind the scenes — it's XML — they can expand as big as you can imagine. There's no, you know, limits to how big they can get. They have no resolution attached to it, so when they're magnified, they stay crisp and clear, no matter how large the graphic gets, which is again, really good for low-vision users who are magnifying their content.

So with the fact that these SVGs can be animated, what we actually warn people about is, like, continuously flashing animation can actually cause headaches, nausea, and be really distracting for people that have, like, ADHD, so you wanna make sure that when you're doing any animation within the SVG, that you're doing it to be accessible and thinking about the different things that people might have that they can then control the SVG. You always wanna make sure that user is controlling what's going on in the interface. So first of all, it would listen to their preferences if they don't want any motion, they can turn that off by saying Prefers Reduced Motion, which will either reduce the motion or completely stop the animation. Also we can add start and stop animation play buttons into an SVG. We can also make sure that it's WCAG-compliant by making sure the SVG doesn't animate for more than five seconds. Or you can actually just design it to be completely harmless and think about how to design something that could be animated, like a loading animation, but it's actually not gonna harm anybody, trigger anybody. I'll give an example of an animation as well.

We have a smart SVG demo, which I'd like to bounce into to show you guys all the stuff in action. We have a responsive smart SVG logo that will respond to different screen sizes and dark mode and forced colors. We'll then show this Appalachian Trail infographic, which shows the selectable text and how it responds to mobile design. And then we'll show the animated smart SVG also responding to the forced colors, which is really cool.

So let me go over to Chrome, and I'll get you guys this demo. And I'm gonna let the demo just play, 'cause I have a really nice accessible description for low-vision users about what's happening, if that's okay.

[00:18:44] Ben: Yeah.

[00:18:44] Video Heather: So, to watch a real-world smart SVG in action, on screen I have a inclusive brand we designed for a company called FluidForm. There is an icon on the left hand side and the text to the right, and below it is a tagline. So we've put the code into a program called CodePen, which shows a column on the left hand side, which is actually the HTML and some CSS, which is actually what's displaying the logo on the right hand side. I'm going to reduce the screen size, and you'll see that the logo will then flip into a mobile version where it rearranges the logo to have a stacked version, where the icon now is on top and below that is the text. Additionally, the tagline has been removed just so it looks its best on a mobile device. And if I truncate the window even further for smaller screens, only the icon then show up.

So in the same file, you'll see that it instantly changes into dark mode. And now, I'm showing the horizontal logo with a dark background and a reversed logo on top, and the same behavior will happen for the mobile and the very small screen sizes.

One of the very cool things that our smart SVGs do is that they respond to different selected colors by the user. I'm going to be showing a standard high contrast theme, which is a dark background with very bright yellow text or foreground colors. And the logo is now switched into a dark background with very bright yellow foreground color, and looks amazing. And also, it still continues to respond to the different screen sizes.

I also wanted to show you an infographic that we designed. Again, we're in CodePen with the code on the left hand side, which is displaying the infographic in the right hand side. The graphic is of an Appalachian Trail infographic. There is some iconography and some different colors, and the text is in different weights. But the cool thing about this one is that the is actually selectable. It is selectable by both a mouse and by a keyboard. And there's different fonts and different weights used within the infographic. And additionally, if I reduce the screen size, it will automatically flip into the mobile version of the infographic, which will format to the mobile screen, so there is no longer any need to pinch and zoom. The mobile version is also still in the selectable and indexable text.

And last but not least, I wanted to show you an animated smart SVG. Again, we're in CodePen, where on the left hand side, you see that there's a bunch of code, which is being displayed on the right hand side of the screen. So on screen, I do have a seeing eye dog that we illustrated. He is yellow. He's wearing a harness with a handle. His tail is wagging, his eyes are blinking, and his ears are moving back and forth. The really cool thing about this particular SVG is that we figured out how to keep the animation, but also allow it to respond to the custom colors by the user. I'm now going to change the background to a dark background with a bright aqua foreground color, and you can see that the animation continues even though it's in the custom selected colors by the user.

[00:22:12] Heather: Okay, so I'm gonna go back to my Keynote. Hopefully you guys can still see this alright. So again, that demo kind of shows you the powers that we're really talking about here, how cool the SVGs can really get.

The other thing we do is that, because we're really worried and focused on accessibility, we are thoroughly testing our SVGs on browsers and on mobile devices, and we're testing on Chrome, Safari, Firefox, and Edge. We test, of course, on iPhone and Android. And we're testing with JAWS, NVDA, VoiceOver, Talkback, and Narrator to make sure that they're translating properly. They can also work with a braille refresher.

To kind of sum up what is so cool about these smart SVGs is that they provide a lot more visibility, especially for low-vision users, to see the graphic and a lot more information 'cause you can have unlimited characters in the backend. So there's a lot more information being given, especially to blind and low-vision users. They do respond to personalized settings which is amazing, as JPEGs and PNGs do not do that. They will also, of course, do the reduced motion. They can be animated. They improve your SEO. And they actually are so fast. They load lightning fast. Like, our website loads, like, in 0.5 seconds, because there's not a single pixel on our website. They actually also, of course, support your Diversity, Equity, and Inclusion promises, so if you're looking to improve your DEI, these are a great way to do this to include more people. Obviously, graphics that are accessible do reach more people, which also creates brand loyalty and increases your market share. So that's kind of some great reasons of why you should start thinking about converting any vector-based artwork that you have on your website from a JPEG or a PNG into these smart SVGs, because of all these wonderful benefits that come around.

And our services at Equivalent Design is to create these. So we actually made a service to take your graphics and to convert them. We also have a partnership program where you can actually kinda white label us if you want accessible graphic design services, or if you wanna just process, you know, say, a logo or something, we will actually just take your graphics and convert them for you and test them and give them back to you with instructions on how to install them inline on your website.

We also do these mobile responsive infographics, which are super cool. So, we also offer something called large print format, which is an ADA-compliant graphic design thing, which many companies don't even know how to do. It's very specific guidelines about making PDFs and so forth for low-vision users.

And we also do document and branding remediation with the brands. We just know that a lot of branding companies and, you know, people that have logos might realize their contrast is not high enough, their fonts really kind of suck. So we actually can help remediate your brand as well. We also do a lot of consulting around the best user experience with graphics and specifically around your user experience on your website.

So that's kind of who we are. And we are online, of course, at www.equivalent.design, and on Twitter at @EquivalentUX. So that's kind of a little bit about us.

And we can actually go back over to Chrome so I can show some other stuff as well. So we do have a whole thing on our website about smart, accessible SVGs, which is a lot of information. We also have a lot of educational information, so if your developers are looking to figure out how to do this, we actually have a whole bunch of stuff that we've put together specifically for developers. We have a lot of kind of how-to-do-this, because we realize that we need to share this information to make sure that other developers know how to do this. And it's really, really important to spread this as social change, 'cause we want to make sure that every graphic becomes smart so that we can actually change the world one graphic at a time.

So on our website, you'll see that there's different videos as well that you can see kind of how things are moving around. We actually have an explainer video. We have a lot more. Like, this is for your marketing team that might want to explain it to your boss or somebody who's not as technical. So if you have a project manager or someone who would want to be the decision maker, you can show 'em this animated graphic video that explains the differences between a pixel-based and a vector-based and what we're up to, which is to make them super, super accessible.

My husband is also sitting next to me, who is our lead CSS engineer, so if anyone actually has coding questions, we have a bunch of resources such as making sure that you use ARIA within the SVG so that the descriptions can get to a screenreader.

There's a lot of articles. One of our favorite authors is Carie Fisher. She's an amazing SVG, you know, engineer and accessible advocate who actually talks a lot about how to do the SVG patterns to make them more accessible. We have a lot of these different resources if you're looking for them. We also have some CodePens that we'll be sharing, which will have the code and the examples of the FluidForm logo, for example. We have the Appalachian Trail to talk about here with my husband Paul today, who, you know, coded a lot of these up. And the animation, of course. So we can talk about how there's JavaScript, there's CSS and HTML within these graphics.

I also wanted to show a really quick clip of this particular YouTube video, which is fantastic. It's called "Unlocking the SVG's Superpowers." Cassie Evans works for GreenSock, which is an animation program that you can actually, you know, put into use with SVGs. We do a lot of GSAP in the back end of our SVGs with animation. This particular, you know, video actually shows this kind of signup box, which is a standard signup box for a newsletter or whatever you might have. But what's actually happening when you type in your email and you hit the Subscribe button, the entire thing is an interactive SVG that turns into a rocket ship and flies away. So I was gonna basically show you guys this animation to show you some of the powers of how cool an SVG can get because of the functionality of here. So she's typing in her email address, and when she hits the Subscribe button, you're gonna see that it turns into a rocket ship and flies away. So, that is an example of an SVG being interactive and animated, which is a really cool feature to add that kind of human touch or something, really. Like, the wow factor of these micro-animations are quite cool.

And again, I'm gonna leave it on this particular CodePen so that, you know, all the coders and developers on the call can actually ask some questions about the code, and Paul will jump in and help answer them.

[00:28:29] Ben: Yeah. Real quick, can you send me a link to this CodePen, and that way I can share it with the chat?

[00:28:35] Heather: Yes, of course.

[00:28:36] Ben: In the meantime, chat, if you have any questions for Heather or Paul, feel free to let us know, and we can absolutely kind of take a look at some of the specific techniques in play.

I'm curious, in the meantime, of all the different things you've mentioned of, like, adapting to responsive breakpoints or supporting high contrast mode or accessible descriptions, what of those challenges struck you… like, struck you personally as, like, the most interesting, or what are you proudest of in that regard?

[00:29:06] Heather: I think the forced colors is probably far the coolest feature that these graphics do. Before I got into accessibility, I had no idea that forced colors even existed. Because I started researching and learning and taking all these courses and going to every webinar, when I discovered that forced colors was a thing and how it really helped low-vision users, and I have a vision disability, I decided that that was, like, super cool and that we needed to figure out how to apply that to all of our graphics, but also keep the graphic's integrity intact, because you could just make the canvas color flood with any color, but what we've done is make sure that you're actually using the hue, saturation, and lightness and reducing the saturation so that the graphic becomes basically black and white. And then we're actually doing a very specific thing that my husband invented to code, which is to take a mask of the actual artwork on top of it as a layer, and to fill that with the color and actually put that as a layer on top of the graphic and turn the graphic black and white so that the graphic really keeps the integrity and the gradient, and so it really has the tonalities. Specifically around brands, for example, it's really important, so you're not just, like, making a bright yellow text, but you're actually really keeping the tonality so the brand and the graphics stay looking like themselves, which I thought was a really cool thing that we figured out.

And the next thing that Paul actually was able to do was to figure out how to do that while it was moving, so the clipping path and the flood of color and all of this would happen during an animation, and that was kind of something that we don't think had been done before. But he was able to code it up, and I think that was something that we're really excited about, is allowing animations that are SVGs to do all of this as well as the forced colors when it's being animated.

[00:30:50] Ben: Good deal. We don't have any questions from the chat yet, but Ryan Trimble has popped in and said "No question, but hi Heather and Paul!"

[00:30:57] Heather: Hey!

[00:30:57] Ben: Ryan let me know when I announced the stream that y'all had worked together before.

[00:31:01] Heather: Yeah, actually he was probably the first SVG engineer that we hired. We found him through an SVG animation Slack channel and he was great. He actually helped animate our logo, which has the E. Actually, it's kind of a fun thing to show. On our homepage, Equivalent Design has a logo up here that has some animation in here.

[00:31:21] Ben: Oooh!

[00:31:21] Heather: One of the reasons why we actually threw this little subtle animation in was that it's under five seconds, but it actually shows that we are going to be doing a lot of infographics and we know that basically, there's always these little boxes and outlines in a lot of the graphics, 'cause they have to change into the opposite color, so you need, like, a stroke that will be on the outside, or the outline would be very important to make sure that it's, you know, seen against the different colors behind it. So Ryan Trimble actually helped animate that logo for us, which was all about making sure that it was done in a beautiful way, and he did a great job.

The other thing about our logo is the three bars actually is a mathematical symbol that my MIT father said was a really cool thing that he noticed, which means absolute equality. And we thought that was a really great thing to make sure that you're really trying to design equivalent experiences for everybody when you're doing these graphics. You really wanna make sure that the user experience has been thought out so that you can think about how a blind user is hearing your graphics, right? You wanna make an equivalent experience for people who cannot see the visual thing. And as a graphics expert, you wanna think about things like colorblind users and dyslexic users. How do you make an equivalent experience for those users?

And that's something that we've really been focusing on since I have a vision and motor disability, is how to be passionate about advocating for those that need help with different things, especially around something as so new and so unknown as accessible SVGs. We want to make sure that we talk about it, teach it, and share all of the information that we've gathered, because I personally don't see a lot of people talking about accessible SVGs and the power that they have and how amazing they can be. In fact, you can actually call in other images. You can clip other images. You can call in video. You can call in audio like MP3s into an SVG so that if you click on something, music plays, for example. The interactivity is endless that you could come up with. Basically, if you could dream it up. It's kind of like Flash, but it works without the plugin. So the kind of, you know… remembering how cool Flash was. You can do all of that, but it actually works across all major browsers. And they've been around for, like, 20 years. They were kind of adopted back in the late 90s and they never really took off.

And so as a graphics person who became disabled and I got into the community, I noticed that a lot of the graphics themselves not only sucked, but they were really inaccessible where they just had bad color choices, bad fonts. The actual graphic themselves wasn't accessible. So no matter what if it had an alt text, it was still terrible, right? It was still pixels. And the reason why I started this whole entire company was to help people because there is this new technology and the new technology is amazing. And so because it's using ARIA, which is Accessible Rich Internet Applications, it can talk to screenreaders and it can do things like that, which is not something that normal graphics can do. And the fact that these forced colors really help low-vision users see your brand, your logos, your infographics is really an amazing accessibility feature that a lot of people aren't aware of.

[00:34:22] Ben: Absolutely. I'm kind of curious. Do you mind if we take another look at the CodePen? I'd love to see how the theming support is being implemented here.

[00:34:34] Heather: Then this is the CodePen. I think we actually closed the…

[00:34:38] Paul: Yeah, I'll get back on the Equivalent Design to go over.

[00:34:41] Heather: Ohh, okay.

[00:34:42] Paul: The one right next to the others.

[00:34:44] Ben: Hi, Paul!

[00:34:46] Paul: I got it. Hi!

[00:34:46] Heather: Got it, got it. So here's the FluidForm CodePen that Paul can talk about.

[00:34:52] Paul: What were you wondering?

[00:34:54] Ben: Yeah, I just, I kinda wanted to see, like, how — and chat, by the way, let me know how well y'all can hear Paul. I can hear him, so I assume y'all can as well. But yeah, I'd love to see just kind of how you're supporting, like, the dark mode as well as high contrast mode. Like, what's the kind of implementation behind that? That was one thing I was curious about. And then also, I guess… yeah, let's look in that one first. So, do you wanna kind of talk us through how you're doing that?

[00:35:25] Paul: We've actually streamlined this just a touch since this was done, but it's still a really good example. Part of the beauty of using the HSL colors is we don't have… we can just, if we need to change one value out of all of them—

[00:35:44] Ben: I think we…

I'm sorry, I think we lost some audio for…

[00:35:57] Heather: Yeah, sorry. I hit the mute button trying to get closer to him, so I apologize.

[00:36:01] Ben: Oh no, you're good.

[00:36:03] Paul: When you have "@media (prefers-color-scheme: dark)," we basically swap out colors. You can do this into the gradients as well, which have… they're assigned their own classes with stop colors as well, as you can see right there. And the fun part is you get to thinking about, for instance, Mac's inverted colors, because you have to remember that chances are the website you're on, they're going to invert the background. So you might have to use your dark to save your… dark mode, and it inverts the colors, you might need to be using your light mode version. Now, Mac is finally gonna be flipping their images back. But again, that's just the image, not the background. Since this is transparent, you have to think about that.

Actually, you have to think about it too for forced colors, because one version may not work, you know, where you can combine if it has an automatic— Excuse me. On PC, Chrome, Edge… yeah, Chrome and Edge both make the decision if it's going to be light mode or dark mode in forced colors. So if your chosen theme has a dark background and a lighter foreground, it will automatically look at the dark color scheme as the default. Unfortunately, this doesn't work in Firefox. But it's something you have to keep in mind that even with forced colors, all these other ones, all the other modes, are still very important.

We've actually… let me see here. The forced colors overlay, that's the fun thing. And it's been stripped down quite a bit over time. Currently…

This is an older one where we used <use> text a lot— <use> tags. Now we're actually, to work in Reader Mode, we're keeping everything in the main viewport, and actually moving things for different states via CSS and adjusting the size via aspect ratio to reduce the actual viewport, versus the viewbox. Which is great, because Reader Mode will mess anything up. All your CSS gets wiped out, and anything with a width gets put to 100%, so…

[00:38:55] Heather: And a lot of low-vision users prefer Reader Mode, 'cause it strips everything out except for the text.

[00:39:00] Ben: Yeah.

[00:39:00] Paul: Yeah!

[00:39:00] Heather: Like, it removes all the CSS. And so we're building—

[00:39:03] Paul: And all the ads.

[00:39:05] Heather: Yeah, and all the ads and everything else that's distracting and anything else that's not supposed to be part of the text that they wanna listen to. So Reader Mode is something that we actually ask people, "Would you like your smart SVG to be Reader Mode-compatible?" And we can actually design that specifically for that by doing, I think I believe it's, like, fallback background colors and that kind of stuff.

[00:39:23] Paul: Yeah! For Reader Mode, basically we put fallback colors for everything.

[00:39:27] Ben: Interesting!

[00:39:28] Paul: I just use regular hex colors so that it has… something to fall back to. And those fallback colors, we put inline on either each group, if the whole group is the same color, or on the individual shapes depending.

Also, we change all rectangles in the SVG to <polygon>s because the rectangle tag in an SVG has an X, a Y, and a width and a height, and Reader Mode actually changes all widths to 100%. So if your SVG is inline, which is what we recommend, it'll go through the SVG and change all your rectangles to 100%, which you can put it right off the screen. So if you change it to <polygon>, where everything is strictly vector, just points, it keeps it from doing that.

So anyway, the forced contrast overlay that we've developed is basically a rectangle put at the very bottom of the SVG in the viewport. If the viewers don't know, SVGs are basically built reverse of the way they are built— your Illustrator file is built. So what is in front is at the very bottom. What is at the back is at the very top. And so we have a rectangle that is defaulted to "display: none" inline, so it's just that way by default, and so it doesn't turn on if you're in Reader Mode. It has a fill color of CanvasText. And then we apply… we wrap the entire image, the actual shapes — polygons, paths, and everything — of the SVG in a group tag and give it a unique ID. Then we have, in the defs, a <mask> tag that references that.

[00:41:41] Ben: Of course it's a mask! Okay. That makes sense.

[00:41:45] Paul: Yeah. And then we apply that mask to our rectangle when forced colors is active. It turns that layer on while at the same time removing… currently we're using what I call a toggle. It's just a multiplier, 1 or 0, that is done through a calc() tag on all the actual real colors. Black and white, not really necessary, but for instance, the blues on this. On the HSL, it will take the S tag and multiply it by zero — or the S attribute, multiply it by zero — and desaturate everything. So you're not having other colors bleed through during forced colors. So we can retain our tonality while, at the same time, applying the user's CanvasText color.

[00:42:45] Ben: That's really clever! Good work, y'all! That is awesome!

[00:42:49] Paul: Yeah.

[00:42:50] Heather: It's all Paul. I mean, he figured a lot of this out and then he applied it to an animated SVG so that that same masking layer applies to something that's moving beneath it. And that was something that he was able to code.

[00:43:01] Paul: Yeah.

[00:43:02] Ben: So, to, I guess, kind of summarize the approach. You've got a layer on top of everything else that's set to the user's CanvasText — CanvasText being a named keyword that the operating system provides a themed color for.

[00:43:15] Paul: Right.

[00:43:16] Ben: And that CanvasText, it sits on top of everything and is masked to the shape of everything underneath it. And everything underneath it is desaturated so that the ONLY color that exists is the CanvasText color.

[00:43:31] Paul: That is correct!

[00:43:32] Ben: That's awesome. That's really neat. Well done.

[00:43:33] Paul: I really am fond of it.

We've been able to reduce the file size. For instance, this one was about 57K, and I've got it down to a 20-something. 30, maybe now?

[00:43:46] Ben: Nice!

[00:43:47] Paul: Before, we used… we created <symbol>s and used <use> tags to define each form of the logo, and it took up a lot of space, and also you can't use <symbol>s with Reader Mode. If Reader Mode comes up, it's just gonna be blank 'cause it takes out any kind of referencing. All the IDs are still there, and classes are still there, but there's nothing to reference them with. It'll take out any hrefs and any <style> tags or the class reference tags.

So what I did is, basically, the image sits there in its primary form. So for FluidForm, this is the default. When we go to this, what I found is I just have a group for the icon, a group for "FluidForm," and a group for the tagline. And these all sit in that master group that the mask references. I actually move them with CSS to their correct positions. This'll be good for readers too who are on, like, for instance, the live text SVGs like the infographic, because you're not getting echoes of the text being rerendered in the shadow DOM. This was something we had trouble with because the text is inline and then also being basically placed via the <use> tag, it would read everything twice. This will help keep it in place without doing that. And it also reduces file size by a lot. I mean, some of our logos are, like, they're in 15K. Really small. Two digits at most.

[00:45:44] Heather: Yeah, it's pretty small.

[00:45:45] Paul: If it's not animated or doesn't have, like, multiple versions that can be down to the single digits like 5k. Like, the FluidForm — part of the reason FluidForm's so big is the lattice.

[00:45:59] Heather: Yeah, the design itself has a lot of complicated vector stuff going on. Which is, you know, important to know that the more complicated your SVG gets, the more time and energy it takes to code these things into a smart SVG. But simple one-color logos are fairly straightforward. Things like this that change the look on different screens obviously add more work and a little bit more load time, but not very much. It's surprising how fast these load. There's literally no pixels, there's no—

[00:46:30] Ben: Mm-hmm.

[00:46:31] Heather: —resolution, so that they do stay crisp and clear at any size. They load instantly, basically. And they're just so much better than normal graphics that we wanted to make sure that this was a service that you could get done.

[00:46:43] Ben: Yeah!

[00:46:44] Heather: Like, you can send us a logo and we'll make this happen for you because it IS complicated. Also, testing across the different assistive technology and the browsers is a pain in the butt, 'cause you have to have all this, you know, access to screenreaders. So we actually really encourage people to also test their SVGs at a company called Assistiv Labs, assistivlabs.com. They actually have a kind of a remote way of getting into different screenreaders so that you actually have access to test these files for different assistive technologies in one location. So, there are some tools out there to help you. There's also plenty of places like GreenSock that'll help you with the GSAP to animate things. There's a lot of Slack channels out there that you can join, which is where we found Ryan who's probably still on this call.

[00:47:27] Ben: So I wanted to ask a bit about the process, right? Because I'm envisioning — you know, for instance, I work on Microsoft Docs. We have tons of graphics, right? So I guess we'll use Docs as an example, right? Let's say, you know, a company realizes that they've got an issue with their graphics. Their graphics could be much more adaptive, right? But maybe, maybe they have a ton of graphics going on. What would you recommend the, like, remediation process be? Like, how would a company prioritize that? How would they go about that? That kind of stuff.

[00:48:01] Heather: That's a great question. We thought about how a larger company… you know, really large companies, you know, multibillion-dollar companies would do this because of the fact that more than likely they have a lot of legacy pixeled images out there.

What we have put together is an audit program so that the company would provide us their branding styleguides, they would provide us with, you know, access to a digital asset manager, or DAM, so that we actually see what's going on with their actual, you know… what do they call it? The stuff that you have all of your information in, and I'm blanking on the term. But when you have access to everything that the company would be normally wanting to produce, you can actually kind of audit it and say, well, this is the plan that we think we should do and we will train your developers so that not only can they go back and really improve the other graphics that are probably maybe vector-based originally but got turned into a JPEG or PNG, they can actually learn how to do some of this conversion themselves. And we actually have a lot of how-to-do-this kind of information as well as kind of the building blocks. We have a GitHub where we actually have what we call the Lab, and our designers have been really putting together the patterns that will work best for these different types of use issues that we are encountering.

And also just making sure that the company can continue to become more accessible by producing these accessible SVGs themselves. So we actually have the ability to do some work with them and to, you know, collaborate, do some of the work and then train the developers so that moving forward, they can actually do any graphics within the company to become these accessible SVGs and have the code, have the technology, have the how-to, and actually train up their developers to do this because we do think this is going to hopefully revolutionize the graphics that are out there and hopefully transform, for the better, the entire internet so that it's more inclusive. And that's the most important goal right now, is to share the tech so that we actually can help change the world by making sure that these graphics are adopted and everybody who's developing them can do them easily enough that it's, like, no big deal in the future, so that people learn this and it's standardized and we all share the information together to improve and always reduce the code and make sure that it's streamlined and it's optimized, 'cause everything's keeping changing. You guys are developers. You know how often things change, that browsers change, that the tech always changes. There's different assistive technologies coming out.

We do know that there are people working on a way to make sure that there's gonna be WCAG standards for screenreaders that have to… like, basically there'll be a way to test them as almost like a single unit so they have to have the same responsiveness to the same accessibility laws. And that is something that they're working on now so these SVGs can actually have standard stuff to work with for the best responsiveness for different screenreaders as well.

[00:50:51] Ben: Gotcha! Super cool!

Chat, we're we're probably coming up on about kind of time, but if you've got more questions for Heather and Paul, feel free to drop them in the chat. We'll probably be able to get to one or two more of those.

And Heather, did you have anything else you wanted to kinda show or, or talk about?

[00:51:13] Heather: Well, I actually did want to kind of talk about something that I know is possible, but we actually are kind of working on doing this, which is many low-vision users hate really, you know, verbose language. Like, they don't wanna sit around and listen to an infographic, 'cause, you know, visual users can scroll by an infographic instantly. They don't have to look at it. They don't have to. They don't care what's inside the infographic they're scrolling by. But a screenreader might pick up the fact that there's this infographic, and you wanna allow the user to have either a very brief, you know, kind of description or allow the screenreader to choose to listen to all the details within an infographic. And we're working on the ability to allow a screenreader user to choose a short description or a long description embedded in the SVG so that choice is actually offered up to them, so depending on their mood or what they want to get the information, they can either skip by it fairly quickly, or they can actually listen to all the details and that's gonna be built into the SVG itself.

[00:52:14] Ben: Absolutely. That seems… I have been interested in kind of the process of, like, personalizing verbosity. I've seen that as a conversation come up on Twitter a couple times. But, you know, sometimes people just want a really short thing of, like, you know, maybe even as simple as "Infographic about the Appalachian Trails," or something like that, right? Like, no more context. And then they could investigate further if they really want. Because with screenreaders, for folks in the chat who don't have a whole lot of screenreader testing experience, when you navigate to a graphic and that graphic has alt text or, you know, some hidden text, you can't always navigate back and forth in the alt text, and so you kind of have to just start over. And so if you've got a very verbose description, then, like, you have to start from the very beginning and it's not always particularly convenient. So being able to personalize verbosity like that is pretty cool, and I wish y'all the best of luck on that.

[00:53:22] Heather: It's again all about the user experience and their choices, their preferences, how do they wanna access information. It's crucial to make sure that they have what they want, and that will really result in a much better user experience, which is the ultimate goal for accessibility, is to allow users to really customize and access information the way that they prefer using whatever assistive technology they prefer, so that they have a great experience with your brand and your website and all your marketing materials.

[00:53:51] Ben: Absolutely.

Alright, we haven't gotten any more questions in the chat, so I think we can probably go ahead and start wrapping up. Heather, this has been fantastic. Before we go, is there… where would you like me to send people to?

[00:54:06] Heather: So, ideally, they can follow us on Twitter at @EquivalentUX. But if you check out our website — again, www.equivalent.design — there are a bunch of videos. Again, the demo's on there. There's an explainer video for people who might be not as technical that need to understand what a vector graphic might be. And also we have just some other great videos that kind of help people understand what's actually going on. There's a lot of information.

Reach out to us anytime if you'd like to, you know, learn more. If you wanted to set up a partnership, we do have a program that's basically processing these for you, because it is kind of kind of complicated. You know, you're gonna test across different assistive technologies and you have to learn how to do all this, which is thinking about a million different things to make sure that these are gonna work in every application. And the animation process, for example, can be kind of, you know, in a whole other extra step. Interactivity. So, kind of think about all the different factors. We have a lot of questionnaires. We walk you through it. We collaborate with you to make sure that we have these media query mockups, because once you start coding stuff, you don't wanna go back and change the design.

And I'm also a graphic designer, and so we have a great amount of designers and SVG engineers on staff, and we actually have the ability to design brands from scratch and we're graphic designers. So we're applying all of these accessible graphic design principles to every single graphic that we would produce. So if you need us to design an infographic or a logo or to fix anything you might have, we do that as a service as well. So, we actually are kind of, like, one of the first accessible graphic design firms that are really focusing on every aspect to become accessible, from the very beginning, of your color contrast, your color choices, to think about dyslexic users, to think about those colorblind users, and apply all of those basic principles to the artwork in Illustrator, and then take it from there for the rest of this. So, the whole process is kind of complicated, and that's why we made this as a service. We believe we're the only firm out there offering this as a service. We're pretty excited to bring this technology to the community and we would love it if you would share it and talk about it with your friends. Maybe, you know, help us really find the right people who would wanna, you know, invest in this technology.

We are probably thinking about larger organizations that have the resources for this type of thing, and really have, you know, the ability to work on their accessibility goals to put this as a priority, because we know it's a lot of work for each graphic to do this, but we do think that people should start with their logo and then any really important infographics that need to be translated for low-vision users into those forced colors, into the screenreader ARIA code. We do think that those are gonna be super, super important for people to become more inclusive and to really consider, you know, upgrading even though it's, you know, time-consuming work to do so. I think that's something that we really wanna promote, that people are aware of this to share the technology and to, you know, basically spread the love and let everyone who's a developer know that this even exists. I think that the awareness is a problem right now, that people don't even know that SVGs are a thing.

[00:57:03] Ben: Yeah!

[00:57:03] Heather: Or this type of SVG exists, I think.

[00:57:05] Ben: Or that they're so capable, right? Like, even in webdev spaces, right? Like, the thought of a graphic that could adjust based on the theme, rather than, like, swapping out two different graphics, right? But, like, one graphic that works in everything.

[00:57:21] Heather: Everything you're seeing here, like, that FluidForm logo is just one file. It has the dark mode. It has different screen sizes. It's got… we actually animated that graphic as well. It does the forced colors. We're listening to all these different media queries and it's all one file! So you don't need to swap out images like you said. There's no pixels, so the resolution resolution is amazing. You can expand it as big as you want. And so these are the ultimate graphic files. When I saw how cool these were, I was like, "We need to make a company that offers this as a service, because it's so amazing that no one's doing this as a service!" I thought this was, like, absolutely something that people might want and that it's complicated, right? So, please lean on us if you want information or to kind of convert your files. Like, that's what we're gonna be doing. Hopefully you have the vector artwork and not just pixels. Obviously, that kind of makes things a little bit more complicated if you're handing us, you know, a Photoshop document. But it is possible to convert anything into a vector format, as long as it's not a photograph. Of course you wanna keep your JPEGs that are, you know, photography still in the pixel format. It would be way too complicated to try to change that into an SVG. And if you do have something that's super complicated or huge, sometimes it's just a smaller file size if you do a PNG. So it all really depends on what you're doing, but highly encourage you to do anything that's, like, a logo should absolutely be changed over to this format. And anything else that's really imperative for people to get that information. Obviously, you know, it's about choosing wisely about where you put your resources and your time, but I think it's something that every organization should seriously consider trying to adapt this technology.

[00:58:57] Ben: Awesome. Well, Heather, thank you so much for your time. Paul, you as well. Thank you for your time. Yeah, thank y'all both for being here. And chat, thank you so much for being here. And Heather, you should know we've absolutely got some love for SVGs in the chat. Just some, yeah, big fans. So, y'all, thank you for being here.

This Friday, I'm gonna have Dan Jutan on. He's from the SolidJS team as well as Astro. He's gonna be teaching me Solid. So that's coming up. Follow this channel if you want to get notified whenever we go live.

And y'all, stick around. We are going to find another streamer to raid. But thank you for your time and we'll see you around. Bye, y'all!

[00:59:39] Heather: Bye!