In episode 31 of UX Podcast James and Per are joined by Derek Featherstone from Simply Accessible to talk about infographics and how we can make them more accessible. We say “everything that needs to be said” and cover some of the challenges, types of accessibility problems, downsides of making infographics accessible, and share some practical tips.

(Listening time: 36 minutes)

References:

• Per’s “excluding” infographic – Digitalt utanförskap i Sverige 2012
• Chris Throup’s Accessible infographics blog post
• WebAIM’s Web Accessibility for Designers infographic
• Another accessible infographics example
• Accessible Infographics Community Group
• Putting Accessibility into Infographics
• Scalable vector graphics
• Simply Accessible’s tips and tricks newsletter

Transcript:

James: Hello.

Per: Were you going to do it?

James: Go ahead. Go just start it. I was going to do it for once. Go on.

Per: No. You go ahead.

James: No. You’ve upset me now.

Per: What episode are we on, James?

James: Thirty-one.

Per: Excellent. We had to check just before.

James: Welcome. It’s a cold Monday afternoon here in Stockholm.

Per: It is really cold in your studio.

James: I know. Mondays are always the coldest day because it cools down over the weekend. I did try and warm it up. It’s raining outside and it’s a little bit windy and they said that snow is on the way.

Per: Oh, really?

James: It could be. It’s coming from the south but it will be awful if it does come because it’s still warm.

Per: I never check the weather service. I wonder why not.

James: You’re not English enough.

Per: No.

James: Or Swedish enough.

Per: Well, I’m not Swedish enough either.

James: No, exactly. Yeah. But today we’re going to be talking about infographics.

Per: Yeah.

James: And well one of the reasons why we’re going to be talking about it is because you have produced a couple of infographics recently Per.

Per: Yeah. One for Brian Clifton.

James: Who we’ve also interviewed here in UX Podcast.

Per: That’s true. And also one for Digidel which is an abbreviation for Digital Delaktighet which basically means digital participation.

James: Yeah.

Per: So …

James: That kind of got me – I got my teeth into Per earlier last week about the fact that he produced an infographic about the amount of people outside of the internet, excluded from the internet that in itself excluded people because it was a flat graphic.

Per: Yeah.

James: So for once we almost disagreed on something.

Per: We almost disagreed.

James: This we need to talk about.

Per: Yeah.

James: So what we’ve done is we’ve decided to give it an accessibility angle and we’re going to give Derek Featherstone a call who is an accessibility guy, a really good accessibility guy. We met him at UX Lx in Portugal. It has been this year I chatted to him and his talk on Friday was one of my favorite ones, from the Friday which you can go back and look at our notes and our podcast about that. I also took part in his workshop which is really good.

Per: Yeah. Well he’s basically an authority on accessibility and we really like his stuff and what he produces and what he talks about and he has been doing this for a lot of years.

James: He kindly said yes to be interviewed today.

Per: Yeah. Let’s call on him.

James: Here you go. Cue jingle.

[Music]

Derek: Hello there.

Per: Hello Derek. Let’s give you a brief background about why we wanted to talk to you.

Derek: Sure.

Per: So I’ve been an advocate of accessibility for a lot of years. I worked in the usability arena for like, I don’t know, 15 years now maybe and recently I produced like two infographics and James is giving me a hard time about infographics. We both know that they’re not very accessible.

Derek: Right.

Per: At the same time, they’re incredible at getting people to share them and getting tweets and getting people’s attention basically.

James: Yeah, because most content marketing goes. They’re undoubtedly a really good tool.

Per: Yeah. So talking about this, we realized we need to talk to a professional and James thought of you. James, you were at Derek’s workshop at UX Lx.

James: Yeah, I was in the workshop then and we chatted a little bit as well I think after your talk on the Friday. Yeah.

Derek: Yeah.

James: I think both me and Per are still using the event website example that you ran through then.

Per: Yeah. I did the sketch notes of your talk on the Friday.

Derek: Yeah, I remember. Those notes were beautiful.

Per: Oh thanks. Talking about accessibility. It’s not very accessible …

James: No. Just their infographics.

Per: Yeah, yeah, basically. Yeah. So I even joined the W3C group for accessible infographics but that group seems quite dead as well.

James: It’s not the most active of groups, it seems.

Per: No.

Derek: No. I think I joined it not too long ago as well and yeah just very quiet, not a lot happening.

James: What really sparked me off last week about infographics again and the accessibility side because me and you Per discussed it a few times. But you did that infographic for something called Digidel in Sweden which is a task force is what you would call it, a task force about digital inclusion. Is that what you were saying?

Per: Yeah, probably. It’s funded by the same people who actually give out the dot SE domain name.

James: Yeah.

Derek: OK.

James: So well in the content of infographic, well it’s about the percentage of Swedes who are excluded from the internet and for various reasons. Partly because of choice, partly because I think it’s difficult to access and partly because of disabilities.

Per: Yeah.

Derek: Right.

Per: So you see the irony of it.

Derek: Indeed.

Per: Yes.

Derek: Yeah.

James: So I jumped on the chance to pick on Per a little bit about the fact that he did an infographic about the exclusion of people, that excluded people.

Derek: Brilliant. I love it.

Per: So what we want to get our head around here is I mean what is the best practice. What should we be doing to make this as accessible to as many people as possible?

Derek: Right.

Per: And first, just tell us a bit about your background and yourself and your company.

Derek: Sure. So I’ve been an accessibility specialist for many years, probably about 12 or 13 years now and so our company is Simply Accessible and we’re based here in Ottawa, Canada and we’ve got people that work for us. Everybody is remote and so we’re a remote workforce and we’ve got a very diverse team that is made up of people that are really good at what they do and then also have really significant accessibility skills.

So it’s something that we’ve all committed to. So we’re not just a bunch of accessibility specialists. We have for example like a great information architect that is also really, really well-versed in accessibility.

We’ve got a great designer and developer and that is also fantastic with accessibility. Even our business development people and people that are working with sort of enterprise level clients, larger clients, they’re not just business development people. They’re focused on the accessibility side of things.

So we’re kind of a team that is really kind of all committed to making everything that we can as accessible as possible. So that’s us in a nutshell really. Creating accessible user experiences is kind of our core. It’s what motivates us all.

So that’s sort of us in a nutshell. We have a team of eight people sort of scattered around North America and we’re really, really happy with the team that we have and everything that we get to do, we get to work on some pretty exciting projects.

Per: So basically you hate infographics.

Derek: No. Actually I love them. I think they are really important tools.

Per: Yeah.

Derek: I think in some ways, there’s a part of me that thinks that – what’s happening a lot is our first reaction now is, “Oh, we need an infographic about that.” So everything is turning into an infographic. That’s not necessarily a bad thing. It’s just something that we need to keep in mind and I think they’re really quite incredible tools.

What we really need to do though I think is look at what they provide, right? What is it that they’re actually trying to accomplish? In some cases, they’re simply static image, representing certain pieces of information in new and creative ways. In other cases there, we’ve seen a lot of content where an infographic is actually something more than just an infographic. It’s a bit more interactive.

So it really depends on what type of infographic you’re looking at but the bottom line for all of them is we look at them and try to think about how we’re going to make that accessible. It really comes down to what’s the purpose of that infographic in the first place. What are we trying to communicate and how is that being communicated?

There are a lot of myths about accessibility, not just infographics accessibility, but one of the myths that are quite common in the accessibility space is that people think that accessible means it doesn’t have graphics. That’s really something that just isn’t true.

In fact when we talk about a more universal design, an inclusive design, designing something that’s going to work for everybody, quite often we need to include more graphics than we typically do because they’re easier to understand for some people than the reams and reams of text that people tend to write.

So we’re saying that we typically use something like this. Most people are familiar with the phrase, “A picture is worth a thousand words,” and then some people will take that a step further and say, “But some people need a thousand words.” I actually like to take that a step further and say, “Some people actually need both.” They need both the picture and the thousand words to get the full picture of what you’re trying to convey with that infographic or that text.

Per: Yeah.

Derek: So I think that’s a big piece of this is really having a good understanding of what it is that we’re trying to convey and trying to do that in such a way that that message can be shared and/or understood by as many different people as possible.

Per: Yeah, right.

James: Yeah, I mean because the classic visual impairment is the thing you instantly think of when you see an infographic. But me and Per talked about earlier about there’s a whole range of accessibilities.

Per: Right. It’s like cognitive disability just like I have. I need pictures to understand things and …

James: Yeah, and words might be just too much if it’s just a long description.

Per: Actually you would say probably that even just having words means excluding people.

James: Yeah.

Derek: Absolutely. I use this kind of classic example all the time. If you think of a web application for example, we use icons to convey specific meaning and most people think that those icons really are sort of this supplement to the error message that goes there or to the success message that goes there. In reality, your perspective on whether or not the icons communicate more meaning or the words communicate more meaning is entirely dependent on the language that you speak.

So if I’m using a web application that happens to be in the different language, the icons are probably going to be more meaningful to me than the words that are displayed beside those icons.

So I think that’s part of the reason that I think it’s a really important tool. Having that visual representation for the words actually is designed to make things easier to understand for people that maybe don’t have the same literacy skills as everybody else or as the people that you sort of designed this content for.

Per: Yeah. So what would your recommendation be to someone? Like you said, a lot of times these days, people have a gut feeling. Let’s do an infographic. But we’ve seen a lot of poor implementations of infographics as well. They are just text or not easy to understand at least. Well, it comes back to what you were saying about what’s the purpose of the infographic and what do we want to accomplish with this.

But if we really want to make as many people as possible understand it, does it come down to complementing the infographic with text or are there any other ways that you’ve seen?

Derek: I mean there are a number of things that you can do. The obvious one is to have some form of text that is in the infographic that supports it. Other things that we’ve seen people do and that we recommend would even be to make some of these infographics a little bit more interactive in that we don’t make them just so they’re one big static image. You can actually take the time to make it so that the text is all real text and not text that is locked down in an image. It could just be text that is built into the webpage or something that is easily readable by assistive technology. Excuse me. Sorry. I’m just getting over a cold here.

James: Yeah, it’s awesome. I think we’ve all got it.

Derek: Yeah, I think so. Exactly. We’ve just had our first snowfall here today and I’m very disappointed in that.

James: Oh, there are rumors that it’s coming here to Stockholm today as well.

Derek: Not fun. So I think part of it is being able to say, “OK. Well what is the purpose of this? What’s the message that we’re trying to convey? How do we do that from a graphic perspective? How do we do that from a text perspective? Can we bring those two things and marry them together so that they’re both part of it?”

There’s other things that we can do as well and when we’re creating some type of an infographic or complex visual, we will provide another version where somebody can toggle say between here’s the graphic version of this piece of data and not just a textual description of it, but here’s a table of data that formed the basis for the graphic component. Quite often you will see things like pie charts or bar charts. That data all came from somewhere, right?

So it’s fairly straightforward to be able to add in something that allows people to toggle between different views and in some cases, you may actually want to say, “Show me,” and then of course I’m paraphrasing. You would never really phrase it this way in the infographic itself but you would have some mechanism that says, “View the graphic version.” View the tabular version or maybe view both versions together.

So there are quite a few different things that you can do and it could just be as simple as that. It could be providing detailed text. We see a lot of map visualizations where detailed text is provided as well as the visual that is provided by the map where both are presented as viable options for getting out the information that’s available.

Per: Right.

Derek: So there are lots of different options that are available to you. I think anyway it’s a matter of thinking about the purpose and thinking about how we can convey these things in other ways.

James: A lot of this reminds me. Let’s go back into the 90s when we’re seeing lots of websites that were completely image-based and some of the things that we’re talking about now are what we’ve been nagging about for 15 or so years, to use full images for each webpage, break it down into HTML and make it interactive. A lot of it should be clickable. It’s the same journey again but within infographics rather than the website as a whole.

Derek: Yeah, absolutely. I think that’s kind of a testament to the kinds of things that we’ve been insane for a long time. We’re really focusing on core principles of access and being able to take those principles and apply them in new fields, right? So now we’re looking at a different type of information or a different implementation that the same core principles are applied.

James: Yeah.

Derek: I think for me anyway, that’s part of the beauty of accessibility is that we have these principles in mind of making sure that something is accessible in as many different ways as possible. We just continue to see new scenarios where people are trying new, creative things and we get to look at ways of applying those core principles to whatever it is that you’re building or designing.

Per: Yeah. The two things about making infographics more interactive, one that I really love is the shareability of flat images.

Derek: Right.

Per: People put them on Pinterest. People share them on Facebook. They spread all over the place which means that they go viral more easily than if you have to visit a webpage specifically to interact with the infographic and the other thing is cost. How do we determine how many days of work we put into this? And if I produce an infographic that’s a graphic in one day and maybe takes me three days to put something into HTML5 or whatever.

James: Make it more accessible.

Per: Yeah. I mean working with a client, how would you forward that to them saying that we probably needed to make it more interactive, to reach more people? How many more people will you reach? We have no idea.

Derek: Yeah, that’s a tricky one because the reality of it is you also don’t know how many people you’re going to reach in the first place, right? The additional people that you will reach by making it more interactive in that maybe there’s a webpage that supports it with some real HTML text. I mean there’s no way to really measure that because you don’t know how many people are actually going there because they have some type of disability or need a slightly different experience.

Per: Yeah.

Derek: And you really don’t know what the reach of that individual flattened image file is going to be in the first place anyway. So you almost have the same problem there. A more HTML-centric version or something that uses SVG or something else is that you get the additional benefit of having that text on there in the first place which means that it’s not something that’s just going to be on Pinterest or posted on Facebook.

It’s also going to have that text that is now searchable and inspirable by search engines and it’s easier to disseminate and have that listed in search engines as well whereas a lot of that text that’s locked down in images doesn’t have the same – it’s not that optical character recognition doesn’t exist and the technology doesn’t exist but it’s certainly much more open for it to be just out there in some HTML type format in the first place.

James: Yeah, you’re right. A lot of infographics are difficult. They’re not good accessibility for search engines either. We would have been creative about how we show information and it’s not always in a way that’s going to work with OCR.

Derek: Yeah, exactly, exactly. So the other side of it is the shareability and I think that poses some interesting challenges and I think in a lot of ways the shareability of it is the same type of problem that we have with PDFs. I mean people like PDFs because it’s just this flattened thing that can be distributed.

Now the interesting thing of course about PDF is that those PDFs have accessibility features that can be built in now whereas if you were just distributing a really large JPEG or a PNG file, you don’t have any accessibility built into that because it’s entirely flattened.

So maybe that’s something where when you’re sharing these things, we need to make sure that somehow in all of those images, there’s some way to embed some kind of a URL or something in there that will point back to some other resource that maybe serves as an original and has a bit more of the original text in it without it being all flattened into an image.

I mean the cost is a tricky one too, right? How much time do we spend for an unknown audience? I mean the reality of it is we spend a lot of time on unknown audiences in the first place.

James: Yeah, the return on investment and cost of content marketing is the same question really whereas in infographic and accessibility or general content …

Derek: Yeah, absolutely. I think people are just sort of looking at it and saying, “Well, we can’t quantify the cost and we can’t say that this has this much more return on investment for doing this in an accessible way,” and in reality they have just as tough a time  proving  the ROI for doing it in the first place.

James: Yeah, yeah.

Per: How about if I put forth the argument that one way of working with infographics would be also to work with infographics in an agile way which is quite popular these days? They put something out there and try to measure any which way you can. But based on data you have from other content you have out there. Is this really becoming popular? Yes, it is. Then we put more resources into actually making it more accessible than it was when we first posted it.

Derek: Yeah, that’s quite a reasonable approach. I mean in an ideal world, we would have here’s an infographic and here’s the more accessible version of it. We would have both of those things live at the same time. The reality of it is that we even have scenarios and again a lot of time, always going to keep coming back to this but people that have PDFs – when we’re working with people that have specific number of PDFs online. Let’s say they’ve got 100 PDFs. When we’re looking at which ones should we make accessible or more accessible, we almost always base it on statistics.

Per: Right.

Derek: What are your top 20 out of those 100 PDFs? So the top 20 percent. What is the most traffic? Which ones are the most important to your organization? Prioritize that way. I mean ultimately the end goal is that we have more accessible versions of everything but the reality is that that can’t all happen overnight particularly if they weren’t built with accessibility in mind in the first place.

Per: Yeah.

Derek: So there’s prioritization decisions that need to be made by somebody else as well. This is not strictly an accessibility problem. This is a problem that we have everywhere.

James: I mean if we sum up a little bit and what we’re seeing is yeah, we need to educate, raise the bar generally about accessible infographics but then also we’re going to have to prioritize. So it’s a resource question but I do like your suggestion too Per about working intuitively and picking out the winning infographics and giving them a little bit extra resource and a bigger hug and making them more accessible for more users.

Per: Yeah.

Derek: Yeah, it would be really interesting to maybe even do some sort of A-B test. I would publish two infographics at the same time or roughly the same time and one has an accessible version and one doesn’t. I even have potential ethical concerns with that. Knowingly saying we’re going to publish something that we know is not accessible.

But at some point, if you’re already doing that anyway, an A-B test might be a really interesting way of seeing what kind of traction or what kind of traffic the more accessible version gets. We automatically think about screening our users. It’s sort of the instant reaction that people have when we talk about accessibility but the interactivity that might be available to people that have low vision for example would be a really significant advantage. There are quite likely more people with low vision or varying degrees of low vision than there are that are completely blind. They’re using screen readers.

James: Yeah.

Derek: So the flexibility of format that we have with HTML and even SVG is much greater than we have with a flattened image. We worked with a client on a number of infographics that were actually showing data and trends and things like that. They were not sort of your traditional infographic content marketing type thing. But they were actually showing pieces of data and that was all built using SVG or canvass and having accessible alternatives for each one. In some cases what we were actually able to see and we built an SVG map that was fully responsive. So as you increase the font size, the map increased in size as well and this will increase and decrease the size of containers. Things are adjusted to fit.

There was just a lot more flexibility in that format than something that was locked down and so we definitely need to think beyond just screen reader access. We need to think about how is somebody with low vision going to have access to this. How is somebody that uses voice recognition software like Dragon Naturally Speaking, how are they going to get access to this?

Somebody that has a cognitive disability that they may have software that’s specifically – they may use screen readers or screen reader-like software to say, “I want the computer to read this to me as I’m looking at it so that I have full-on access to the visual but I also hear it be read to me.”

That’s not all that uncommon that people with cognitive disabilities will use screen reader type technology as well. So there are a lot of different variables in there that we need to think about that go beyond just screen reader usage and somebody that’s completely blind that needs everything read to them.

Per: Very good suggestions and very good tips as well. Just the good points about not all people who are blind actually see everything in pitch black but they actually have some sort of vision as well.

Derek: Yeah, exactly, exactly.

James: Well, I think we’re going to have to wrap it up there.

Per: Yeah. Thanks so much for doing this with us and I mean I’ve gotten a lot out of it and I think our listeners did too as well.

James: Yeah.

Derek: Well that’s great. I mean it was a pleasure and I love exploring topics like this because they’re new and exciting and everybody is excited about it. If we can get people thinking about the accessibility side of it, while there’s a lot of buzz about a particular type of topic, then that’s even better. So do let me know if you want to explore any other topics. I would love to.

Per: Definitely.

James: Excellent. We will.

Derek: Thank you.

James: Thanks for joining us this morning.

Per: Yeah. And feel better.

James: Yeah.

Derek: I will. Thank you very much.

Per: Yeah.

James: Thanks Derek.

Per: Bye-bye.

James: Yeah. See you later.

Derek: Bye-bye.

James: Bye-bye.

[Music]

Per: OK then. I hope you guys could hear that because we have no idea what the sound was like. One of the mics gave up on us just before we called Derek up.

James: Well we couldn’t get it to work with Skype.

Per: Yeah.

James: It was a bit more complicated than we had bargained for. So we shared the microphone.

Per: Yeah. My voice is usually louder than yours.

James: It is, but I tried to hold it so that I was a little bit closer. I thought about that.

Per: Manual tweaking.

James: Yes. All of you out there have got to give me little extra points for trying to balance the sound but we will see. Now we’re on separate mics again. Excellent fun talking to Derek.

Per: Yeah. I think he said everything that needs to be said basically.

James: It’s not easy with infographics. Like I mentioned, we’re basically throwing ourselves full circle back to the beginning of the web where we had websites with full images that you just click on to follow things. It has a lot of problems and using the ultimate accessibility perfect infographic isn’t going to be cheap.

Per: Yeah.

James: It’s going to be difficult catering for all types of accessibility issues and disabilities.

Per: Yeah. Basically I mean one of the points he makes and I think everybody needs to think about is whatever content you produce, which way you produce it, you’re always excluding somebody.

James: Yeah, pretty much.

Per: Yeah.

James: Then on top of that with infographics, some of the techniques we’re talking about here in the podcast about the interview that would help make your infographic more accessible are going to reduce its shareability.

Per: Yeah.

James: That is the key thing, the key attractiveness about infographics is they’re so darn shareable. So if we produce nice HTML5 interactive infographics, people aren’t going to pin them on Pinterest and they’re not going to post them on their Facebook walls in the same way.

Per: Exactly.

James: So maybe you have to do both but then it’s going to be …

Per: Yeah. But like Derek said, it would link back to something and then it’s accessible.

James: Yeah, I’m going to dig into that. I like the idea of how we can maybe make it into images. I think we’re going to struggle there to find something that’s obvious. But embedding some in the image helps you. Maybe you can put some clear text on image. Good contrast and so on. That maybe makes it …

Per: Yeah, then more people can see.

James: Exactly. We will make it possible for various people to realize there is an accessible version somewhere.

Per: Yeah.

James: But that means then you put it out the same time or you alter the graphic afterwards. Once your graphic is out there, it’s out there.

Per: Yeah. Oh, wow. If only the QR codes would work the way we want them to.

James: Oh, well, URL at least. But a QR code maybe? This is a thing to play with here.

Per: Yeah.

James: This could be fun.

Per: Coming up.

James: Coming up.

Per: Christmas show.

James: Oh, dare we say what we’re going to do?

Per: Well, we will do a version of it.

James: All right then.

Per: We will do a live show.

James: We’re hoping to do a live show in a couple of weeks. I need to …

Per: Well in front of a live audience at least.

James: Yeah. I think given our record with microphones and getting them all to work, we’re not going to dare introduce more than three mics into the podcast.

Per: Yeah.

James: But hopefully that’s what we’re going to do. We will record the podcast for the live audience. I’m not going to give any details because we’ve got to really properly agree on it all. That will happen in a couple of weeks.

Per: Yeah. So just stay tuned and remember to keep moving.

James: And see you on the other side.