fbpx

Understanding The Power of Accessible SVGs

Accessible SVGs (Scalable Vector Graphics) featuring Guest Heather Neff of Equivalent Design. Smart SVG graphics can increase accessibility while maintaining brand style this is the podcast for you.

Accessibility Podcast Topic Links

Accessibility Podcast Transcript

Dax Castro
Welcome to another episode of Chax Chat. Join Chad Chelius and me Dax Castro, where each week we wax poetic about document accessibility topics, tips, and the struggle of remediation and compliance. So sit back, grab your favorite mug of whatever, and let’s get started.

Chad Chelius 
Welcome, everyone. Today’s podcast is sponsored by the North Idaho College and the upcoming Accessibility Camp Coeur d’Alene, which is on August third and fourth in Coeur d’Alene, Idaho. More information on the A11Y Camp Symposium can be found at nic.edu/a11ycamp. So we thank them for being our sponsor for today’s podcast. My name is Chad Chelius. I’m an Adobe Certified Instructor, as well as Director of Training Solutions and Principal at Chax Training and Consulting.

Dax Castro 
And my name is Dax Castro. I am Director of Media Productions at ChaxTraining and Consulting. And Chad and I are both Accessible Documents Specialists certified by the International Association of Accessibility Professionals. And if you want your certification, head on over to accessibilityassociation.org and our good friends over at IAAP. They are a great organization and we highly recommend you hooking up and being a member of that group. Lots of great things to learn. Chad, how’re you doing today?

Chad Chelius 
Doing pretty good. Doing pretty good. We’re wrapping up another week. And you know, wrapping up some projects and everything’s going really well.

Dax Castro 
Awesome. We are in full swing with cucumbers. We have cucumbers coming out of our ears. I have my kimchi is in full swing. It’s tasting great. It’s three weeks old now. So for those of you who know, the older kimchi is, the better it is. And we’re getting ready to use all of our cucumbers to make some other kinds of kimchi. So it’s pretty exciting. So

Chad Chelius 
Very interesting.

Dax Castro 
Awesome. Well, Chad today we have a very special guest. We, you know, normally we talk about tag and then when sometimes we’ll have a guest on and you know, I typically will troll the Twitter or Facebook or somewhere LinkedIn and find a podcast guest. But Heather is someone interesting. So I met her at Access U and actually a little bit before Access U. And our guest is Heather Neff. And Heather, why don’t you introduce yourself? So welcome to our podcast. Thank you so much for being here. Tell us, tell our audience a little bit about you.

Heather S. Neff 
Thanks. I’m honored to be here today. So a little bit about me, I am a Graphic Design Marketing Director, Creative Director. I’ve been doing this for over 20 years, and then I became disabled. So a whole thing about trying to figure out assistive technology to help me. I tore a ligament in my arm. So mousing became super painful, I got a current pain. So I started seeking out different assistive technologies, which led me into the whole world of accessibility, which is of course, as you know, a rabbit hole of endless information.

Dax Castro 
Yes, that is true.

Heather S. Neff 
Yeah, so, as a designer, it was a big deal about trying to figure out what to do. So that’s how I got into all of this. And I am actually running a company I founded called Equivalent Design. And we are an accessible graphic design firm. And we specialize in creating, encoding, accessible SVGs.

Dax Castro 
Awesome. So SVG, so let’s talk let’s so I know, you know, pretty much in the graphic design world, people are used to using, you know, JPEGs and PNGs, and TIFs and EPS. I’m not sure that there are a lot of people out there who are familiar with some of the benefits of the SVG format. So can you talk a little bit about that?

Heather S. Neff 
Sure. So the scalable vector graphic, or the SVG, is actually made out of XML, which is extensive markup language. And the way that we’ve kind of had most of us have seen it is that in Adobe Illustrator, as you export your graphic, there’s a way to actually get the SVG code and the code is in XML and you can grab that code when you’re exporting from Illustrator. And then you can actually take that into, you know, editing program and start taking out the crap that Illustrator puts in there. And really, they put a bunch of stuff that just comes in that doesn’t need to be there. And then also, the way that you export stuff is really important. But we can actually get in there and add a bunch of accessible code ARIA stuff inside of it, and really start customizing it to respond to media queries, and to do different things for screen sizes to respond to different screen sizes. And there’s so much we can do including having invented some new ways of coding things to even respond to force colors. So we’ve been actually up to actually coding new things to create these scalable vector graphics into the ultimate accessible graphic.

Chad Chelius 
Yeah, so like for the designers for the listeners out there who are designers, right? And especially print designers, right? I mean, in the print world, we’ve always kind of separated our graphics into two different camps, right? You have pixel or raster-based graphics, typically ones that come from Photoshop. And then you also have vector-based graphics. And they are typically graphics that come from Illustrator and, and the beauty of vector graphics is there is no resolution, right? They are literally infinitely scalable. And I know for me, I always say vector is king. Because when you’ve got vector, you can do with it, whatever you want. No degradation, no loss of quality.

Chad Chelius 
And traditionally, on the web, we have, you know, and Heather, correct me if I’m wrong. But traditionally, on the web, we have been relegated to using pixel-based graphics, right? That the web graphics we typically are using, we go back aways as JPG, right? And then PNG is a little bit newer than JPEG, but they’re still both pixel-based graphics. So at a certain point, you try to scale them up too high, or or make them too big. And you see that degradation in quality. Now SVG for the web is what, you know, SVG is a vector graphic, right? And, you know, Heather, there’s been a bunch of sites I’ve been seeing that offer like a high contrast node, where you can, you know, click a button or, you know, click an element on the page, and it’ll switch the website over into high contrast mode. Can you can you tell us a little bit about that. And…, go ahead,

Heather S. Neff 
This topic is so complicated because it does back all the way up to actually offering the WCAG Compliancy of 1.4.8, which allows the user to surf the internet in the way that they want to; i.e. like dark mode, or in force colors. So getting before you actually get into these vector graphics and how they can actually respond to this, you need to make sure that you’re offering that better user experience by offering up to have your website in dark mode to begin with.

Heather S. Neff 
I don’t prefer it when you have a button to do that, because you’re actually overriding the preferences for the person who’s already chosen that in the backend of the OS systems. So ideally, what you want to do is put a dark theme on your website, and also allow, it’s not allowing the OS system to do this, but PC users can go into the back end. And it’s it used to be called high contrast themes. Because it’s usually it was a lot of contrast, but they recently called it contrast themes, since the user can actually have a low contrast or any color that they want to choose the foreground and background. So… in this kind of process, you wouldn’t want to actually override any of that on a website. You would want to make sure that the website’s responding to the back end of the person’s personal preferences first and not trying to override that.

Heather S. Neff 
So that’s something to really consider before you even get into these scalable vector graphics that we’re doing that are accessible is that they need to respond to the OS systems and not be forced. And sometimes there’s extensions for dark mode, that forced dark mode. And you don’t want to do that you want to make sure that you’re actually using the backend of your OS so that the natural websites will respond to you. I guess the biggest problem right now is that so many people are not even offering up the basic dark theme, which is a problem. It is a user experience problem, especially for low-vision users who cannot stay on a bright website. Sometimes they actually put a dark screen over their monitor so that that can’t happen as they get into a site that doesn’t offer a dark theme.

Dax Castro 
Well, you know, for our listeners, so the web content accessibility guideline: Visual Presentation, which is Success Criteria 1.4.8 is a AAA requirement. And I know that there’s a, I don’t want to say there’s a contest, but there are… when people are developing websites, they’re trying to maximize the amount of accessibility features that a website can offer the end-user. And I think that whenever someone can include a useful AAA requirement, they should, they you know, if that’s an option for someone, why not? Even if it’s only for one or five, you know, maybe it’s only 5% of your audience or 1% of your audience, right? It’s beneficial.

Dax Castro 
And so 1.4.8 Visual Presentation says for visual presentation of blocks of text, a mechanic, a mechanism is available to achieve the following: foreground and background color can be selected by the user with no more than 80 characters or glyphs, text is not justified, the line spacing, it talks about some different line spacing here can be… is to be at least a space and a half within paragraphs and paragraph spacing is at least 1.5 times larger than the line spacing, and that text can be resized without assistive technology up to 200% without basically, you know, deforming the website, right? And I think that there’s been, there’s been talk from people who’ve asked me the question, how big should I have my text for accessibility? Right? What are the rules for font size and accessibility? Now, while this doesn’t actually give you a font size, it does talk about line spacing, and what those are, and as an AAA requirement, some people might think, oh, I don’t really have to do that. But if you can, why not? Right?

Heather S. Neff 
It’s all about the user’s experience. If you care about meeting legal requirements, and that’s it, you’re not caring enough. Like you need to be inclusive. You need to think about everyone else. Like just limping into the legal is not good enough. You have to think about these extra, you know, things we can do. Adding a dark theme to your website is just a little bit of CSS, it’s not hard. Most of these larger companies that fail to have even just that basic are not thinking about it, aren’t even paying attention to the fact that the user experience is absolutely imperative to be able to do these things, especially for people that have disabilities.

Dax Castro 
Right? I can think of one website that has a black background and orange text. And I’m like, I don’t prefer that. I, It’s not that it’s hard for me to read. It just it’s my brain wants to absorb everything. I don’t have enough differentiation between the different areas, because all the headings are orange, all the body text is orange, there’s not a lot of, of it’s very monotone. And I need, for my brain, I need that, that differentiation. And if I had the ability to change some of those things up to make it more palatable for me, I think that could definitely be a benefit from a cognitive standpoint.

Dax Castro 
But so going back to the SVGs, right? So the one of the biggest problems is, is if I’ve got a logo, and it’s themed to my own logo colors, and then you put the site in, let’s say low contrast mode or high contrast mode, and now my logo is basically invisible. Because let’s say my site was designed with a white background because I want my dark colors and my logo to pop. And all of a sudden the user wants dark mode, and I’ve got navy blue or black as a primary color for my logo. My branding is now affected, right? And that’s a benefit?

Heather S. Neff 
Well, actually, if they don’t have a dark theme available, the site won’t flip. So it’ll stay in the white mode or the light version of it. There are extensions that can force that. And that’s when your graphics might disappear. So if you have a dark, graphic, dark SVG, dark PNG, that’s transparent. Those can literally disappear when you have somebody who’s forcing a dark mode onto the website.

Dax Castro 
So so how does the SVG help overcome that?

Heather S. Neff 
Well, the accessible SVG is different than just normal SVG. Many designers are used to putting an SVG extension type file into their website, since they are so beautiful on any retina device, and it responds to your dark mode. So the graphic that would be served up, if you’re on a dark-themed enabled website, would be the reverse out logo. You wouldn’t even notice a change because it would just give you the dark theme website and all of the graphics would be beautifully made for that dark theme. In your branding style guide, a lot of times people will give you a white background on your logo or you know, transparent for a white background. But they also give you on a dark background of reverse that logo…

Chad Chelius 
Well, the tech geek in me is really, really curious. So I’m really curious, like when you talk about like using the operating system to force contrast mode?

Heather S. Neff 
Yes.

Chad Chelius 
Is the operating system looking for a media query of a specific name in your website? Is that how that works?

Heather S. Neff 
Well, the the specific thing is, yes, it will respond… When you are in forced colors, it will force everything into force colors, every single website, every single program on your computer, your Mac, your mail program, whatever it is, everything is forced into those colors. So it’s a really dominant thing. When you have a website that has that, a lot of times the graphics don’t shift because they’re not responding to that media query that they are in that type of force colors thing. But these graphics will actually see that and change over to have that reflected color, so that they can actually see your brand or see your infographics. And that’s a huge thing for low vision users. Because a lot of times, it might be, you know, some might be a low contrast pixelated logo, and if they try to blow it up, it also becomes super pixelated, hard to read. And these graphics are actually being the color that they’ve chosen that they can actually perceive. A lot of times low vision users get like two or three inches from a monitor, and they need these really bright garish colors to see. So it’s actually quite a crucial thing to allow your graphics to flip into that to match what they’re looking for.

Dax Castro 
Hey, Chad, this seems to me a lot like in Illustrator, there’s the replace colors feature, you know? Then you write I mean I don’t use it very often. You back when I was doing logo design way back when, and we had to go through color iterations of a logo for a client, I would be very careful to design with that replace colors or feature. So that when the client was either, you know, in a conference call, or I was sitting there with my laptop, this was days before zoom and teams and all of that, I could just be like, yeah, sure, let’s drag this around. And I drag sliders, I’d replace colors and all of a sudden, there, it would morph into these different iterations of their logo. And it was like magic, right? And, you know, clients really dug that. And it made my job a lot easier, because I could just say, Okay, I’m gonna drag this slider tell me when to stop. And they’d be like, “Yeah, there. That’s it.” Save. Paycheck, please.

Chad Chelius 
Yeah, invoice.

Dax Castro 
Right? Well, it sounds like there’s some really good stuff here. I know, my dealings with high contrast mode, I was teaching someone, from Nigeria, actually, how to do some accessibility work inside PowerPoint. And the first thing he asked me was, “Hey, can you put your windows into high contrast mode?” And honestly, it was the first time I had ever put my computer in a high contrast mode. And talk about a jarring thing when you’re not used to it. Everything’s black, Chad. The entire screens are all black in every program, And then you have fuchsia, and cyan, and yellow, and all these really like, you know, I just think 80’s neon colors on a black background. And it was really interesting. And I noticed in the PowerPoint, a lot of the graphics did disappear in with that dark background, because they were all transparent, you know, just transparent PNGs, or just art that had been made in the in the program that wasn’t responding to that contrast mode. So having your ability, Heather, to be able to predict or to accommodate whatever that user is going to pick, is there good user experience embedded into this graphic, I think that’s such a great benefit.

Heather S. Neff 
It absolutely is. The other thing is if a brain really doesn’t want to accommodate this particular setting, they can prevent that and keep the logo looking like itself, we just highly encourage it because it is a smaller percentage of the users. And they would actually a lot of times, you know, be in a low vision situation, they can actually perceive your stuff. Which is again about allowing the user to choose that which again, is the AAA Compliance for 1.4.8. But it is actually something that allows a lot of people to actually see what’s going on in your website. So we highly encourage all brands to start with their logo and to allow that media query to happen. Since it’s so important as well.

Dax Castro 
It also shows that a brand cares about accessibility. That you’re thinking about those types of things.

Chad Chelius 
Yeah, yeah.

Heather S. Neff 
Absolutely. I think the other big thing is that we’re testing across all major browsers. But we’re really focusing on the screen reader experience and making sure that they hear very thoughtful contextual description as well. And there’s a lot of cool things that SVGs can do that are a little bit different than just an alt text. So because we have the ability to actually use what we call selectable, or sometimes illustrated with live text, where it’s actually like text, we can actually build that into, say, an infographic. And that text can actually be selectable, or keyboard navigable within the actual graphic, which is something I had never seen before. When we started getting into this.

Chad Chelius 
That’s probably like, the first time I’ve heard that Illustrator, anything you output from Illustrator can be accessible. You know, because like in, in Dax, in my world, in the world of PDF, you know, when you place an Illustrator file in InDesign, and you export it, it’s just a figure, right? There’s really nothing else there. But you know, in your case, you’re saying, exporting to SVG, you’re saying that that text from Illustrator can remain live?

Heather S. Neff 
Yes, exactly.

Chad Chelius 
That’s really cool.

Heather S. Neff 
There’s a bunch of little things that you need to do obviously, in to choose the right font types. I think OpenType fonts work better than any type of ttf file that was tied to things like that for screen readers similar to PDFs that you need to be in the same format. But yeah, you can actually export that layer as actual text that comes into the XML as text. The other thing we can do is have unlimited characters. Now, that’s something that’s actually quite different than alt text, where sometimes people want that really brief thing. We’re working on right now, we haven’t actually figured it out yet, but we know it’s possible, is that we’re going to be able to allow a screen reader user to have a choice of a very brief alternative text, or they can actually listen to a fairly longer extended kind of description, and that’s going to be a choice within the graphic itself served up.

Dax Castro 
Oh, that would be great. I that would be a huge benefit. I you know, talking about alt text inside of SVG, you know, it’s really a, it allows, it’s almost like the metadata inside a JPEG or a PNG where you can right click and go into, or you can set the metadata for the title or the description to include that alt text. But currently, as far as I know, InDesign is the only program that can actually suck that out and use that  as a piece of information, right? Because if you dump in a PNG or a JPEG into a website that may have, you know, a title or description, metadata, that doesn’t automatically get dumped into the alt text, right?

Heather S. Neff 
Not automatically, there’s two things that I’ve learned recently is that Google will index all that metadata and start, you know, putting that information into Advanced Search. The other thing that’s going to happen is the company name, Scribely, has actually been working with the IPTC, to have alt text adopted into their standardization, both along in a shorter description. And one of the things that she was able to do is work with, I believe WordPress, to actually when they upload any photograph to automatically suck out the alt text, which is a fantastic accessibility. So I know that she’s been working hard to make sure that something like that would happen in a content management system that would see embedded in the metadata and pull it out for everybody to see.

Dax Castro 
Right. And that’s Caroline Desrosiers, we actually met at access you and we talked about that. Yeah, absolutely. And if you ever are in need of trying to develop alt text, you have a lot of alt text that you need to get done, Scribely, actually is scribelytribe.com, and you can actually hire their company to create the alt text for you. But if you’re looking to create your own alt text, we’ve got a webinar coming up just this Thursday. That is the Secrets of Writing Effective Alt Text. Now, I don’t have all of Caroline’s secrets. But I can tell you that what we’re going to teach people in this webinar, it’s a three-hour webinar. So it’s definitely not just a quick thing. But we’re going to teach people how to understand what it is you’re trying to get across. How to be able to write that in a formulaic way that lets you basically apply a formula to any graphic that will give you a very clear answer to the question, “How do I write alt text for this?” Whatever, figure chart, graph infographic, whatever, right? So Chad, you and I we’re gonna, well, I’ll be presenting that. But I’m really excited about that. We’ve got a couple handouts for that. And you can go over to https://www.accessibilityunraveled.com and look at our open enrollment online events. A matter of fact, there’s even a big image on the homepage there where you can go sign up for that. So for those people who are listening, and you’re looking for guidance on how to write some alt text, and you want to do it yourself, head on over to our website and sign up for that. There are, there is still room and we’ve got a $75 discount right now, for people who sign up. You know, and we’d love to have you so…

Dax Castro 
Yeah, I mean, all text is one of those topics that on paper seems like it’s a very simple thing. But I can’t tell you how many customers have been reaching out to me, asking for guidance on how to write good alternate text, because they’re often presented with a challenge or like, well, what am I supposed to do? And, you know, one of the things you’re going to talk about Dax, is, you know, you have to ask yourself, what is the intent? Right, right? Because based on the answer to that question, you could have different alternate text for the same image.

Dax Castro 
Totally right.

Chad Chelius 
Because it all depends on what the intent is. What you know, what message are you trying to convey? You know, in the context of that image?

Dax Castro 
Well, and that’s why when people, when people ask you that question, you say, Well, what are you trying to get across? They’re like, well I don’t know. Well of course, then of course, you can’t write the alt text for that. If you don’t know what it is that you’re trying to get across, then, yeah, I get it.

Chad Chelius 
You know, you and I, as the people teaching this, we’re like, well, we definitely don’t know, right? Like you and I definitely don’t know the answer to that, you know, only you, as the document author, you know, the person responsible for this project can effectively answer that question.

Dax Castro 
Well, I would say, I would say, Heather, that it’s similar to when someone says if someone were to tell you well, what force colors look good for my logo, what do you think? And like? Yeah, I could give you 100 different combinations, and they all would be right. So it’s not about me, it’s about what you want, right? And yeah, kind of that whole theory.

Heather S. Neff 
Yeah, with all texts. It’s all about contextual descriptions and knowing what the author is intending, and therefore really understanding what’s really important to talk about within the alternative text and making sure that actually represents why you put it in there. It’s really important to also think about the emotional effects that an image can have and how do we kind of given an equivalent experience, if it’s something about the brand, or some type of emotional response, that’s actually something also to kind of figure out how to write about, which is super tricky.

Dax Castro 
You know, one, so my, my forte is accessible infographics. Making, you know, advanced experiences when you’re dealing with graphic art and FR accessibility. And one of the things that I teach is doing your work in Illustrator, keeping it live text, so that you can bring it into the PDF, and then access that live text and actually tag it as text. But what you’re saying is that if you were to export that as an SVG, it skips that whole step. Because now, and this is basically web-based, we’re not talking about inside a PDF. But in a website, in a website, you can have that same experience, automatically, almost, I mean if you’ve coded, if you’ve done it correctly. So that that, that what I have the ability to do inside a PDF manually, you can do automatically in an SVG embedded into a web page. That’s, that’s great.

Heather S. Neff 
It’s basically, SVGs are basically a document type. So it’s like putting a website inside the website. In fact, they’re so powerful that they can actually call in audio files, they can call in other rasterized images, if you want, they can clip, they can mask, they can add filters. And they can be super interactive. One of the examples I give is, you could design an SVG to be like a signup box, right with your name normally be typing in your name, and there’s a submit button. So you type in your name, you hit the submit button, and then the whole thing turns into a rocket ship and flies away. Like amazing little micro animations that you can do a lot of times SVG is are also for like loading graphics. And we’re super compliant. So of course, if you did any SVG animation, we would want to make sure that they are either less than five seconds to be WCAG compliant, or you allow the user to actually stop and play the graphic if it’s animating. And then also it would have a media query to have that prefers Reduce Motion Media Query, which would be listening to the preferences in the old system saying I don’t want animation. And it’s up to the engineers to, if they do have that checked off, what actually happens to the graphics, there’s all kinds of ways to slow it down. Or you can only have it repeat once or you actually kill it altogether, depending on what the company wants to do with that, like actual request to stop or to reduce the animation.

Chad Chelius 
So, Heather, I’m curious like is, is there a significant demand for this technology? I mean, are you finding clients that are that are reaching out to you to be able to implement this within their organizations,

Heather S. Neff 
What I’ve found is every single time that I share this information, I get a wow, amazing, I’ve never, I didn’t know it could do this like this is an incredible discovery. And the only way I found it was that I stumbled into a course that didn’t even know existed. And it was one of these things where I was like, I think I should bring this to the world. I had never seen it, I thought I was a graphics expert. And I knew everything. And then I discovered all this extra stuff. And I was like, oh, geez, I didn’t know anything about any making accessible graphics. And therefore, when I’ve talked to other peoples and tech companies and other major companies, accessibility firms, they’ve never even heard this technology. And in fact, every single time I’ve reached out on LinkedIn or on Twitter, I get a great response. People are very excited to share it and to talk about it. And my goal is to literally change the world one graphic at a time. And I’m going to bring this to national level chapters. And to make sure that we teach at conferences and give away a bunch of information. I think I’m one of the first marketing people on graphic designers that saw the potential of this. And I’ve made a company to do this, because I saw that in the accessibility field, there’s such a misconception that everything has to be boring and ugly, to be right.

Dax Castro 
And you’re that all the time.

Heather S. Neff 
Yeah. And I as a UI, UX person, who became disabled and saw this technology, I was like, Oh, hell no. Everything can be well branded and beautiful. You just need to know what the hell you’re doing. And this is something that is imperative for all of us to learn because this technology will advance us so far and become more inclusive and really create social change and what’s absolutely imperative is that everyone knows about it.

Dax Castro 
Well, and you are, so in that vein, to know about it, they can reach out to you on Twitter, right, @HeatherSNeff, N E, F, F, or how do they get? How else can they get ahold of you?

Heather S. Neff 
Well, the main company, Equivalent Design can be found on Twitter as well @EquivalentUX, and it’s a capital E and capital UX. And again, that’s EquivalentUX. And then also our website is www.equivalent.design. And that’s something it has a great explainer video we put our branding into it. All of our branding has to do with basically disabled animals. We have a guide dog is our mascot, and we have this whole explainer video showing what a pixel is what a vector is, and walking through the process so that anyone, especially upper management, and people who are not designers can actually under thinking and what we’re trying to do. My little sister watched it and she said, “I had no idea what you did. But now I’m sold, like this is great.”

Chad Chelius 
Yeah, yeah.

Heather S. Neff 
Once you understand the potential, you see how inclusive these are. We also have demos on our website that shows you the same logo truncating onto, you know, smaller and smaller breakpoints on there, you know, and we show the code pen with a code equaling the graphic. And you can actually see it change into dark mode, you see, it changed into force colors, you can see it still animating in force colors. And you can see it’s showing the selectable editable net keyboard navigable text within an infographic on our homepage. So again, that’s www.equivalent.design.

Dax Castro 
Awesome. We are so happy to have had you on today. We, you know, definitely, I think this is one of those topics where you don’t know what you don’t know. And once you hear about it and hear what’s possible, it opens up so many doors. Now, a lot of our clients are all in the PDF business. But I think accessibility obviously expands far from there. And that we have websites and mobile apps and all of the different, you know, presentations of digital media, and SVG has opened that door up to create a richer experience for the end user. Which is really what it’s all about. It’s giving that equal that digital equity to everyone, regardless of the way they interpret information. And I think that is so important. And for companies out there who, you know, here’s my pitch to companies who might be listening: This may not solve a bunch of problems for you. These, this technology isn’t, oh my gosh, we this is the solution we were looking for. What this technology is, is a marker to say, hey, we care about presenting as much accessibility as possible. About reaching the largest audiences, you know, as possible that we are looking at, and being considerate of people with disabilities. And you know, this is Disability Pride Month, right? And, you know, last month was Pride Month, you know, and for people who have, in the LGBTQ plus community, and I think that’s great. And I think, you know, you know, a lot of people were changing logos and making different big presentations. This month is Disability Pride Month, and it is, I’m not sure I’m seeing the same enthusiasm, and we see all of these DEI, you know, you know, that is diversity, equity and inclusion. And I think sometimes disability, peoples with disability get marginalized. Yeah, you know, and so I would, I would just say that if you are looking for a way to say, hey, we’re a company that cares, we really are investing in technology that that reaches the widest audience, this is a technology you should be interested in.

Heather S. Neff 
And as a marketing professional, it’s also about the bottom line. And unfortunately, major corporations need to see some type of return on investment.

Dax Castro 
Right.

Heather S. Neff 
The ideal situation, as you guys know, is if you make something accessible, it makes it better for everybody, but also can open up your market share. So to make these graphics search engine friendly, to load your site faster, just put the keywords in there to actually make these things, you know, more information and visibility to people, you also get the brand loyalty, which is great. So if I find that super accessible, I am then a brand advocate, right? So as the disability community is 1.5 billion people, that’s a lot of revenue that you could be generating by you know, making sure they feel as accepted as possible. And one of the reasons why I call our company Equivalent is in the accessibility word, your world you’re always hearing make an equivalent experience. Right?

Heather S. Neff 
To make sure you’re thinking about all different types of disabilities. And we’re designing for things like ADHD and dyslexia and all that kind of cognitive issues, as well as things like color blind and blind users. So everything we design in Illustrator is actually going through every single thing we could do, as well as designing print work, because we’re graphic designers. So we’re actually doing, you know, everything we could possibly think of including InDesign templates from scratch. So we are actually really focused on all kinds of graphics, and that’s what we’re doing. But it’s our tagline is “equity through graphics.” And we really wanted to bring that equity into everything we do. But yeah, it’s actually really important for people to realize disability inclusion as part of that inclusion thing on your DEI statement.

Dax Castro 
Right.

Dax Castro 
Exactly. Exactly. Awesome, Chad?

Chad Chelius 
Yeah, you know, Dax, you and I were talking to somebody the other day, who had said their counterpart like that their coworker, I think it might have even been her boss. He said he absolutely hated PDF files. That they’re not accessible, that they can’t be made accessible. And you know, it’s hard when you hear that and you know, that comes from an area of bad experience.

Dax Castro 
Right.

Chad Chelius 
And so, to your point, you know, I have to believe that, you know, the factors that companies consider, right? Like when they’re, you know, making their website accessible, it has to include like, like, listen to me, if I’m somebody who benefits from an accessible website, you’ve got to believe that if they hit a website that is friendly, and that accommodates them, that they’re going to come back, and they’re going to become an advocate for, you know, that technology. So, you know, I have to believe that, that, that that is going to be part of the factors that a company will use to consider, you know, whether to implement this type of technology.

Dax Castro 
You know, I find it’s funny because my wife has celiac disease. And so everything has to be gluten free. And so we go to restaurants, there are specific restaurants we go to, because of, there’s one called Lazy Dog out here. And I know they’re not listening to us. But Lazy Dog used to have…

Chad Chelius 
They  should be, they should be

Dax Castro 
the most, the most amazing gluten free carrot cake. It was, it is outstanding. And after COVID, or during COVID, whatever, they stopped serving it, because they just weren’t getting enough people out. Right? And so, but we were we didn’t honest.ly, I don’t really care for the food, there’s nothing special about, well, maybe the maple bacon is properly special. But But I mean, the food is, is is pretty normal. There’s other options we could go to. But because they serve this gluten free option, we’re more, we decide to go there. And there are other restaurants that we go to specifically because they offer gluten free options. And I think that for it’s a loyalty thing, and I’ve you know, I have a an issue that that you’re going to, you’re going to cater to, I’m going to come to you. If it’s more expensive, I don’t care. If it’s a better experience for me and I, my wife gets to eat the food she wants to eat, and I get to enjoy myself and we get to enjoy that experience, I’m absolutely going to pay extra for that, or I’m absolutely going to be loyal to that experience. Because it shows that you care. And it gives me the freedom to know that I can have a great experience with my wife while I’m out. And I think accessibility is that same kind of way, it may not directly impact in a specific instance, your bottom line, but the overall impact is I’m going to be brand loyal, I’m going to know that you care and that you’re considered about me as a feeling. And I’m going to tell somebody else Hey, did you know blah, you know, XYZ and and that’s gonna get passed on, you know, and your brand is going to grow. So you know, it’s, it is more than, there’s an added benefit, like you said, to the bottom line.

Heather S. Neff 
I have a little story. I’ve been actually working and talking with a man named Doug Schepers. And I call him the grandfather of SVGs.

Dax Castro 
Doug is great. I watched one of his videos the other day on on cognitive info, the cognitive reasoning behind infographics. Oh, my gosh, Doug is amazing.

Heather S. Neff 
Yeah, so he’s been doing this. And he is the one who fought for four years to make Firefox, Chrome, Safari, and at the time, Internet Explorer, adopt the SVG. He fought for four years because he could see how important this technology was. And so he’s the one of the reasons why it was adopted a bunch of years ago, and honestly, huge props to him, because he’s still doing low vision user software that’s absolutely amazing. He’s an expert in SVGs, and does a lot of data visualization stuff. Which is a totally harder and more complex topic than just making iconography for an infographic.

Chad Chelius 
Sure, sure.

Dax Castro 
Chad, I actually sent you a link to one of his videos and teams. I’m scrolling through teams now to try to find it. It was one of the ones that I had looked at, I just wrote, I just contributed to a paper on infographics for the Urban Institute. And part of my research was researching Doug’s material. And

Chad Chelius 
Oh, interesting

Dax Castro 
It was great. Talking about cognitive load, and how, how we create a graphic and in the what, what affects how quickly we interpret that information from a visual standpoint. So

Heather S. Neff 
I talked about doing iconography for ways, you know, Wayfinding, and maps and so forth. And the example I love to give is, our brains calculate an icon way faster than some of the text. So if you’re running through an airport, in any country around the world, and you see the men and women’s signs that are icons, you know, exactly that’s a restroom, but can you try to imagine trying to translate the word restrooms into every language and try our brains trying to figure that out? We’re running through an airport, there ain’t gonna happen. So these iconography can be very good but they have to match universal icons. You just can’t make up your own and expect someone to understand. So that’s a big key about that as well.

Chad Chelius 
Well, a great example of that is IKEA. All of IKEA’s instructions to put their products together, have no text. And that alleviates them from having to translate into all of those different languages. All of their instructions are just figures, you know, step one, right? Do this step two, do this, you know, and I, whenever I have to trust me, I’ve put together my fair share of IKEA furniture in my life. And I can tell you, I mean that they do a very good job. Right? You know, I mean, it’s typically, you know, very simple.

Heather S. Neff 
However, if you’re blind.

Chad Chelius 
Ah, very, very good point. Very good point.

Dax Castro 
Right before COVID. I was at CSUN in LA. And this is right, you know, what, when COVID was kind of announced as a go home matter of fact, the last day of CSUN, it was they cut the day off and said, Go, everybody leave, we’re done.

Chad Chelius 
Oh, that’s right.

Dax Castro 
I was there the day before that, talking to someone from IKEA. And she and I were strategizing about how we should come up with a way to tactile label the different pieces for IKEA furniture to allow a blind person to be, or a person with low vision, to be able to assemble the furniture. Having like a Braille system or a dot matching system or raised, you know, lettering that’s like a to a, b to b, and then you know, it was a great, you know, the conversation didn’t go anywhere past that. But we thought, you know, what, how awesome would it be for IKEA to come out with three or four different pieces of furniture that a blind person could assemble on their own?

Heather S. Neff 
Or order it online pre assembled would be nice, too.

Dax Castro 
But yeah, that’s true. But you know, getting delivery is also an issue, right? Getting someone to get it in the house. And, you know, when you’re dealing with with a sofa. But anyway, you know, it has been so great having you on the program, we really appreciate you taking the time to come and, you know, talk to us.

Chad Chelius 
Well, Heather, thank you again, so much for joining us and being a guest on our podcast. It was it was great having you on I learned a ton. So I really, really appreciate it.

Heather S. Neff 
Well, thanks for having me on today. I was honored to be here.

Chad Chelius 
Absolutely. Well, listen, guys, once again, we want to thank the North Idaho College and the upcoming Accessibility Camp Coeur d’Alene, which is on August third and fourth in Coeur d’Alene, Idaho. More information on the A11y Camp Symposium can be found at nic.edu/a11ycamp. And just remember, if you’re looking for in person or online training, or struggling to establish an accessibility program within your organization, head over to accessibilityunraveled.com. My name is Chad Chelius.

Dax Castro 
And my name is Dax Castro where each week we unravel accessibility for you.

Chad Chelius 
Thanks, guys.

0 comments on “Understanding The Power of Accessible SVGs

Leave a Reply