Podcast Episode 12 - Creating an Accessible Infographic

the IAP Your Accessibility Podcast

This week on the IAP, we discuss creating accessible infographics for the web and social media.

Show Notes & Links


Announcer: This is the IAP - Interactive Accessibility Podcast with Mike Guill and Mark Miller. Introducing Mike Guill and Mark Miller.

Mark Miller: Hey, welcome to the IAP. Thanks for helping us keep it accessible. I'm Mark Miller, I'm here with accessibility specialist Mike Guill and this your accessibility podcast. Do us a favor if you enjoying the IAP share it, tell somebody about it. Hey, even link to it from your accessible website. So, Mike, i've finally done it.

Mike Guill: What's that?

Mark: We've come up with a topic and not used Twitter.

Mike: Oh no, that's not true I saw this on Twitter!

Mark: Well, you may have seen on Twitter because I put it on Twitter! Well, I think kathy wahlbin put it on Twitter. But this is on our website on the Interactive Accessibility blog. This is a, um…

Mike: Is it any good?

Mark: Uh, yeah… it's all right.

Mike: Who wrote it?

Mike: Um, some, I don't know, I'm going to butcher the last name… michael gills g, g… you wrote it!

Mike: Of course.

Mark: So, anyways, this is where we're going to talk about your piece, here, that you did, which is a really a great blog post. And, now, I have to say that I pay attention to the social media metrics on our website and this is getting a lot of… , a lot of chatter, lot of buzz, a lot a shares. We put it in our newsletter – which, by the way, if you listen to the IAP and you want to get a hold of the Interactive Accessibility newsletter, pop onto our website interactiveaccessibility.Com and subscribe to it. It will show up in your inbox once a month or so – but, this is creating an accessible infographic and I think it's a great, you know, it's a good topic and it's kind of a little on the periphery of the accessibility remediation world because, we think a lot about websites and we think a lot about documents and pdfs, right? Those are the two things people are always trying to make accessible. But, infographics show up everywhere, right? They're all over social…

Mike: Yeah they do

Mark: … media there they're just all over the place. So, I think that putting a little bit of time and thought into making them accessible is very appropriate.

Mike: Yeah.

Mark: So, anyways, i'd first off, before we get into it, is there anything you wanna particularly say about your own blog post here?

Mike: No, really, the blog post itself has been a little bit of time in the making, just because of the, you know, back and forth editing and all that sort of stuff. In the case… in the case of this pdf file that we highlighted - we didn't design it, so all we couldn't, you know, go back and make changes to the pdf itself that would make it accessibility… accessible as a pdf or, you know, the most accessible it could be. So, in a couple cases - like I know that on, you know, someone in the comments on facebook and google+ pointed out that the color contrast fails in a few cases on the pdf.

Mark: Let's be fair, you got a little heat because there was some accessibility issues still remaining.

Mike: Yeah that's right

Mark: You got a little heat on social media. But, I think the point you're making is that, yes there were issues remaining, but what we did is we made the best of a given situation. … or you made the best a given situation.

Mike: Yeah, I guess what I was really getting at is that: I think we needed… I think we as designers need to move away from this idea that infographics or pdfs or pictures, you know? … I can… ideally I didn't want this pdf to be a pdf I want it to be an html page.

Mark: Html document…

Mike: Yeah, so, when its html, then it becomes… it becomes even more accessible and that's what mainly the article is about. If you were if you were handed something that was a, you know, a design… either design concept or finish design, it's possible to take it and make into a html document that is much more accessible than the picture or the pdf… or any combination of those.

Mark: Right, well, and that's the… you know somebody like me who's not… I'm not an accessibility specialist like you are, I'm not sitting here doing this remediation but that's definitely the point that I got from this, is that hey lets stop looking at things like pictures and thus was looking you know… html is basically is a way to programmatically create a picture. And, when you have something programmatically created, a lot of options that… the content to be consumed. But a picture you got to look at.

Mike: Yeah, and the thing is that - I wrote about briefly in the concluded - but the other thing it's me is the responsive web. Users on the web are being trained, they're getting used to seeing responsive sites that adapt and respond to their device. And, people are becoming a lot less rigid when it comes to pixel perfect designs and placement of things on the screen, because they know that depending on the size of the screen or the size there device's screen, things could change a little bit. Not just for visibility but also for usability. It's, you know, it's easier to use bigger size buttons on your iphone. Instead of little tiny links of text. Things change and they can change and they should.

Mark: Right. Well, and the other thing I like about this too, is that just, you know, a lot of people can do this. There's… most people have that html, css talent in there, you know, in their workplace. And, if they're creating infographics this just might… it's just a different approach for them. And, with a little… reading an article like this and a little bit more research they can do it in a way that is accessible right form beginning.

Mike: Yeah.

Mark: And to quote the author, michael Gill… Guill… I don't know how you say his last name, “creating an accessible in for graphic should not be rocket science to anyone who can slice psd files and turn out good quality html and css.” which, as I just said, is quite a few people out there. Right? Those are pretty widely held skillsets. “there can be few extra bits of work involved in perfecting the finish page, but in the end the infographic is not just a static image it is readable by people using assistive technology and also easily indexed by search engines, which can be considered a type a blind user.” so, I think those are all really good points for changing the way you approach infographics.

Mike: Yeah and, you know… let me… I can even be selfish for a minute and say that, you know, I brows on the web and social media on my phone a lot… on my iphone. I don't wanna see those infographics that require me to pinch and zoom and scroll around the page. Because…

Mark: … you want one that's done responsively.

Mike: Yeah, I mean I really like that… because, as it is, if I see a big infographic on the phone I just skip it. I figure we'll, I'll see it. I'll look at it later on when I'm on my computer, which is never

Mark: Right, well, so tell me this, just in relation to that, and to make your point, when you go to a website now on your phone and then you have to pinch and zoom - like this big crazy thing comes up with a little tiny writing on it. Now that you're used to that responsive website that formats itself to the phone is really nicely presented – do you kinda skip past it? Because I know I do.

Mike: Unless I'm doing something that is…

Mark: I'm getting spoiled by responsive…

Mike: Unless I'm doing something that requires me to accomplish an action – then, yeah, then I don't even bother with the page. If there's something like the, you know, a case came up where I was away from, I was visiting my in-laws, or something. Didn't have my laptop. All I had was my phone and I needed to, you know, pay an online bill to a storage unit, or something like that, then I couldn't… I had…

Mark: That's a random example… pay an online bill to a storage unit?

Mike: Yes! Hey, it happens you know! But, what I'm saying is, the storage units website didn't… it wasn't responsive, it didn't have an app… I couldn't… it wasn't setup so they couldn't do it through my bank's app. I have to go through their website and their checkout process. And, since it was not responsive, it was a little tiny form and it wasn't really that accessible, I had to suffer through it. But I did it, you know. If I did not have to you know, pay that bill by a certain time then I wouldn't have bothered with it. I would have just said, I'll do it some other time when I get back home.

Mark: Right. So, this whole time i've been sitting here wondering what Mike Guill hides in his storage unit.

Mike: Many, many things…

Mark: Maybe our listeners can speculate maybe that'll be our next heat we get on Twitter.

Mike: Anybody who knows me, knows that we move like sharks.

Mark: Yeah, that's true you do move like sharks. Well yeah that's a… . I think it's… we get spoiled so easily, I guess that's my point. As soon as we jump… can you imagine having it go back to a phone stuck to the wall? There's no way. You wouldn't do that. You've got your phone that you stick in your pocket you take with you, and we as a society are almost offended at the thought of having to, sort a, step backwards and put up with an old way like that. I think that's where we've hit with this responsive design - is that we're spoiled now with responsive design and infographics are not going to get a look on the phone because people are gonna be like, “this aren't responsive. Forget it. I don't wanna move around and pinch and zoom. I don't wanna deal with any of this.

Mike: Yeah, which is a shame that so many infographics are being still made with pictures because they're a great for showing information, you know, for conveying information. They're wonderful at that.

Mark: They're really good. Well, and the other thing I think, kinda, comes out of this is that you and I spent a good amount of time talking about responsive design here, which is really something that's out there for the masses, right? It's not… it relates to accessibility but it's not its first reason for being out there, right? But it also… I think that it illustrates how the lines between accessibility and good ux design are blurring. Where accessibility really does… when you thinking about accessibility it puts you in a whole new and better mind frame for design...

Mike: … yeah…

Mark: … in general. And user experience in general. So it's… you know, if your developer out there you gotta be thinking about accessibility. It's only going to improve the way that you are as a developer.

Mike: I think you're right. You gotta be trying to benefit everyone. Universal design.

Mark: Well listen Mike Guill, good job on the blog post. Pat on the back. There's a – I don't know if the listeners know, you're and I aren't in the same location when we do these podcasts – so I'm going to have to mail you your cookie. So look for that.

Mike: I appreciate that.

Mark: It won't be in the amazon box that you normally get. Alright, this is Mark Miller

Mike: And this is Mike Guill

Mark: Reminding you to keep it accessible.


Announcer: The IAP - Interactive Accessibility Podcast brought to you by Interactive Accessibility, the accessibility experts. You can find their Access Matters Blog at Interactiveaccessibility.com/blog


Share This Post