Internet
How to
Newspapers
Twitter
SEO advice
Categories: Featured, How to, Internet, Latest, SEO advice, Wordpress.

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

January 24, 2011 13 Comments

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.)

Making an infographic accessible

Making an infographic accessible

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).

point four of fourWhat now?

Diet & exercise can improve your cholesterol levels

<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):

point four of four

What now?

Diet & exercise can improve your cholesterol levels

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. Guardian makes its comments accessible, SEO friendly and mobile friendly all in one go!
  2. ALT text, accessibility and SEO
  3. Design, readability and websites
  4. Google reduces the font size of publication names in its news results
  5. SEO friendly URLs: myth and fact

Share this post

Follow me on Facebook or Twitter

13 Comments »

  • Paul Gailey says:

    interesting concept, but if maximum reach is an objective of the infographic, how does this approach outweigh the benefit of a single image, especially when seeded into some blogging communities, that are likely to reuse the image within their posterous/tumblr blogs with the ease of their bookmarklet tools that grab the image from your post and then allow them to comment on it in their blog. Do you advocate supplying a single image as a compliment?

    • Paul - well, depends on your objective of course. But there are a couple of options (apart from the legal necessity of conforming with the DDA requirements ...).

      One is, as you say, to supply images as well for those who want to embed - in fact, I would supply several in different sizes, to allow for different blog widths.

      The other is to supply EG some iframe code with a plain HTML link after it.

  • LordManley says:

    Hmm, I agree with the sentiment entirely and this is what I would recommend for most content, but for an infographic where the aim includes penetration I would have to agree with Paul to an extent.

    It may be that more users link to your page, rather than sharing just the image, but if you want to spread the information, rather than just link bait then maybe something like the Levin Alexander method would be preferable.

    Contrary to my comments elsewhere, I did enjoy this post, although I shall never admit it.

  • Tola says:

    As much as I think it's a decent idea I'm with Paul on this... Plus I bet a number of designer would not be too pleased at this idea..

    Wouldn't the alternative be to include a text version at the end of the image which outlines most (if not all) of the actual facts and figures displayed within the image?

  • Paul / LordManley / Tola: There are only some infographics you can do this too. It wouldn't work with this one: http://boxofficequant.com/sequel-map/. But most of the ones I see are pretty boxy and can be chopped up. Tola - sod what the designers think ;)

    Tola - yes, you can include a text version at the end, and I've seen a (very) few instances where sites/people do this. That would also work, though doesn't seem quite as neat to me.

    Also, the idea of offering different size images is probably one you should do regardless - you often end up with some very fuzzy looking ones where some blog process / browser has resized it. I'd create high-quality originals in different sizes to enable better embedding.

    But this also all applies to any form of visual representation of data, even if it's not an infographic for SEO reasons (there are other sorts, you know ...). EG go here: http://www.standardlife.co.uk/1/site/uk/pensions/getting-started/basics and click "Check out the benefits" bottom left. That visual representation is made up of words on background images.

  • Good post! tank for sharing. it's an usabili concept often forgotten

  • Great advice here Malcolm! I just caught yours and @hobo_web's conversation on Twitter last night about long descriptions. Back in the day I can remember those being recommended... but you know what? Never came across a single, genuine implementation. Infographics would be a perfect case for having longdescs in theory but I'd say alt attributes and slicing images in logical ways as you demonstrated above would always be the better option anyway for accessibility. Why? For one - instant recognition for users without images - the text is right there on the page and not somewhere else forcing them to click. Secondly, even if the page renders perfectly, alt attributes work in CONTEXT for both search engines and also any users having trouble reading some fancy typography by allowing them to hover over the image to see the text (good argument for title attributes as well as alt attributes for Firefox users here!).

    • Yes, I've never seen anyone use longdesc properly. Wonder if people even look out for it these days. And taking people off to a different page to read something they should be able to read on the first page seems a bit pointless to me ... And from an SEO POV having the content on a different URL to the page with the image (to which people link) also seems wrong.

  • Nice!

    Fancy going through my site and doing that to all my images then?

  • [...] Coles raises an important point on his site in this post: How to make infographics accessible and SEO friendly at the same [...]

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.