Posted on by Chris Throup

Accessible infographics

It all started when I saw this tweet:

It was almost 23:30 and I was tired (I know! That’s what being a parent does to you) but I had to be up because Orion, our 5 month old son, was demanding milk and I’m afraid you just can’t reason with him when he gets like that. So, bottle in one hand, smart phone in the other, I followed Dominik’s link to see what was so great about this infographic.

I liked what I saw. I do care about creating accessible web pages and I thought this was a neat way to present some good accessibility tips. But I did find it odd that this document about web accessibility, which included the tip: “Use True Text Whenever Possible”, was presented as a solid image file. True, they had included the contents as plain text below the graphic but – I reasoned, as my brain protested it had done enough thinking for the day – as the content was fundamentally just text, why didn’t they practise what they preached and “use true text”, relying on CSS to present it in its graphical form?

But it was still a useful guide, so I thought I would do my bit for the community and retweet with a little commentary of my own:

Still feeding Orion, I looked for an inspiring video to watch on TED.com (A TED speaker’s worst nightmare http://on.ted.com/BYYt which I found quite amusing). Finally, when I had almost finished feeding Orion, my phone beeped at me to tell me there was a new “update involving me”. Sure enough, Dominik had seen my modified retweet and replied, leading to a brief conversation, which you can follow on twitter.com if you are wont to do so, before I gave in to the glories of sleep.

In the morning, I awoke to find another “update involving me”:

I replied; and so did he:

But who was this person? A moment with Google revealed the truth: Jared W Smith is the Associate Director of WebAIM, the organisation who had created the infographic in question.

Hmm. Had I caused offence in my brevity? I believed I had a valid point, but now I was beginning to wonder if I had misunderstood some subtle aspect of the situation. Why wouldn’t real text be feasible in an infographic?

So, to cut a long story short (do I hear you cry “too late for that”?) I set out to demonstrate my thinking by recreating the infographic as CSS-styled, real text. The result can be found at http://throup.org.uk/infographic/ and is probably embedded below, if your web browser allows it.

Apart from the obvious, there are a couple of other minor differences between my version and the original:

  • The logo is not exactly identical, but I think it’s close enough to prove the concept. I’m sure it could be more accurate if I spent a little time tweaking!
  • The graphics and colours accompanying each statement are close imitations, but I do not have access to the source images so I had to recreate them.
  • In the original, the header and footer are set off from the main content by some nicely designed, angled gradients. I left them out because:
    1. I am not a designer, so it would have taken longer than I cared to spend to recreate then nicely; and more importantly
    2. I wanted the infographic to scale nicely to match whatever text size the viewer chose for their web browsing experience. Assuming they were rendered as bitmaps, those diagonals would quickly lose any sense of quality as they increased in size.
  • Because my version is real text, I am able to include links to articles on the WebAIM website to expand on each point. WebAIM did this in their plain text version, but obviously not in their graphic.

Now I have spent a little time working with it, a couple of other points have begun to niggle:

  • Make Sure Links Are Recognizable
    I can’t fault the original version for this because the links weren’t part of the graphic. But, in imitating that original look, I now have some links with no visual cue as to their existence.
  • Don’t Rely on Color Alone
    The original graphic clearly grouped the tips into four categories. I say clearly; the categories are distinguished by colour and some separating space. Surely we can do a little better than that?

To resolve those niggles, I created an alternative stylesheet (most web browsers provide a means to switch stylesheets; this alternative sheet is titled “Better?”) which adds an underlined style to all of the links and also reveals the category headings which I have added to the page structure.

So, there we have it. An accessible infographic. I know it isn’t perfect – it was knocked up in an afternoon – but I think it proves the concept. If you have any suggestions for further improvements, please leave them in the comments and, if appropriate, I will try to incorporate them.

Post to Twitter Post to Facebook