How to make your infographics accessible and SEO friendly at the same time

Infographics are everywhere. Some good – some bad. But most creators don’t stop to think how to make sure search engines can understand their infographic – or how people who can’t see pictures can consume them (maybe because they rely on screen readers or have chosen not to download images to their mobile phone).

The trick to make infographics accessible and SEO friendly is to ensure:

• they’re chopped into relevant sections (ie not one big image),
• text is text (you should be able to select it with a mouse)
• if anything has to be shown as an image, you set appropriate ALT text (the flipside of this is that, if the image doesn’t add any information, you DON’T set ALT text – I’ll explain this below.)

There’s lots of infographics out there. I’m going to use this illustration from David McCandless – not because I’ve got it in for him (in fact I think he’s amazing) but he’s released it under a licence that says all non-commercial use is cool.

Also I should point out that I’m a crap HTML coder so if anyone can improve on this, do let me know. And I’m only going to sort out the bit that says “4 What now, Diet & Exercise” in the bottom left hand corner.

Separate images and text

As it stands, that bottom left bit is just part of an enormous image. So we need to separate out the image and the text, rendering each appropriately. I’ve taken a screenshot of the green jogger and the orange “4”. Because that green jogger doesn’t convey any information, I’m going to set that as a background image of a DIV. But I’m going to include the four as a proper image with ALT text, because you need it to understand how the picture is broken into 4 sections.

So here’s my DIV (go on, try selecting the text), and here’s my code (minus the sizes and the bits I had to put in to override my blog’s CSS and get everything positioned correctly).

<div style=”border-top: 2px dotted; border-bottom: 2px dotted; “>
<div style=”height: 43px; clear:both;”>
<p style=”margin-top: 2px;”><img src=”http://www.malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/four.png” alt=”point four of four” style=”border:0px;float:left;margin-right:5px;”><strong>What now?</strong></p></div>
<div style=”background-image: url(http://www.malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/infotest.png); height: 76px; background-repeat: no-repeat; clear:both;”><p style=”margin-left: 25px; margin-top: 2px;”><strong>Diet & exercise</strong> can improve your cholesterol levels</p></div></div>

As you can see, I created some divs, positioned some images and set some styles on the paragraph to make sure it didn’t go over the little green man. The orange “4” has ALT text of “point 4 of 4” to help those with screen readers understand the structure of the information.

OK, you’re thinking. That looks rubbish.

Apply a fancy font easily

So for my next trick, I’m going to change the font to something snazzy. To do so, we’re going to use a font replacement method, making use of google fonts.

To use google fonts, you add one line of javascript to the head section. (If you don’t want to add this to every page of your wordpress blog, you could use this plugin to add it to just the one post, not that I’ve tried it).

So here it is with font-family: Lekton; added to the style section of my paragraph above, and a couple of other minor changes to adjust the height (the original didn’t use Lekton (I don’t know what font it was), but this shows you can change the font):

Is that it?

Yes, that’s it. It might not look much but I’m not a designer. However, I’ve successfully divorced the images from the copy, made the copy readable by search engines, applied a fancy font at different sizes, and added ALT text to the only image that conveys information.

That, my friend, is all most infographics are. And with some halfway decent HTML and CSS skills, you could recreate the entire original making sure that all the copy was readable, and the images hidden (or not, as necessary).

What’s with the background image and the image with ALT text

SEO heresy though it may sound, shoving ALT text on every image, even if no actual information is given, is annoying from an accessibility point of view – people with screen readers don’t want to hear the information twice (once from the text, once from the ALT text).

So if the image is decorative, keep it out the way – either make it a background image or set ALT=”” (don’t just leave the ALT text off, as some screen readers may then read out the file name which is even more annoying).

And finally, if anyone can think of a way to improve this advice, do let me know in the comments, below.

You might also like

1. Google Instant filters put gay and lesbian on a par with rape, racism and paedophilia
2. How to work out what Google Instant means for your business
3. Google Instant keyboard navigation increases likelihood of clicking PPC ads
4. Google autocomplete now fixes spelling problems
5. Google puts the anal in analytics

Leave a comment!