accessible infographics

| 1 Comment


Really. I see an infographic as an ALT IMAGE for a body of text. In an accessible world, alt images would exist for all text based data—but you won't find much support for the idea. If I have trouble with Excell, it's viewed as my problem, not something for which I can get an accommodation. Simply, though, if an infographic is presented digitally, the data that it presents exists somewhere, and the two sets should appear together.

Several months ago WebAIM, one of the most esteemed, and I think most useful, accessibility sites on the web released an infographic titled Web Accessibility for Designers. If there's a model for a "best practice" I'd count on WebAIM to provide it. Sure enough, they do a bit more than I would.

The image, a 650 pixel by 1682 pixel PNG has an alt attribute that says: "Web Accessibility for Designers infographic with text description below." I would suggest empty quotes.  I don't see a reason to even state the image is there to screen readers. Following the graphic is the text based data set. The WebAIM designers actually went to the added trouble of inserting very small, simple icons at the beginning of each text line, with the single image in empty quotes and each line of text in an h3 tag.

In my example, The text loads first, and it's readable as paragraph text. The image is last, with an alt attribute that says "A graphic representation of the text on this page." See what I mean? I think my way is simpler and more practical, but that's my opinion. I do think that adding important h3 titles through out the text might make it more skim-able, but that's a decision for the text creators.

1 Comment

I do like the way you did it. It actually follows the practice recommended by WGBH for complex visuals - basically to replicate the information as a text available to both the screen reader and non-screen reader audience.

One thing I'm learning about complex visuals is that not all sighted users can equally process them, so text is a great backup.

Penn State
Creative commons license.

Tell me how I can help you.
This form will send me an anonymous email; if you want a direct answer, please identify yourself.

What are you doing to make the tuition hike worth it to incoming students?Improve the workplace; hire for variety.
March 27, symposium 2010.
Me with a camera.

From the TLT Feed: