How detailed should a text alternative version of an infographic be?

Question

Had a debate with a collegue recently about a accessible text alternative to an infographic we have. When they wrote the text alternative they wrote in detail exactly what was going on in the picture in detail mixed with the embedded text itself.

My argument is it should only be the text on the image itself, as that is the main focus and the graphics are just supporting it, and not adding to the understanding of the content. I also think a visually impaired user might find it a bit patronising. I'm all up for making stuff accessible but to this level seems pointless.

How much level of detail should the text alternative to a infographic have?

Answer 1

The answer depends on how accessible you want the site to be. (Hint: you do want it to be accessible unless you have a really good reason.)

As WCAG 2.0 accessibility guidelines state:

1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)

Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)

Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)

Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.

Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.

CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.

Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

Infographics do not qualify as any of these items, so you need to provide full textual descriptions of them.

(Now, how you actually do that for a large infographic is a different question!)

Answer 2

Norm's cheatin' guide to accessibility states: it should match the words you would use to describe it to someone over the phone, without using spatial descriptions (e.g., to the left of, above, near the other thing; those would be bad!) and that best conveys intended meaning.

Sometimes this violates common wisdom on alt, such as if there are other pictures on the page that are of the same topic, "Black and White picture of yellow lab" and "Color picture of yellow lab" can be necessary, instead of using "yellow lab" for both alt texts.

How I can suggest using the term yellow lab when referring to a black and white picture is left as an exercise to the reader! ;)

Answer 3

JonW's answer is a good one, and addresses the issue of whether a textual equivalent should be provided for the infographic as a whole, but I don't think it answers the real question you are asking here, which is about how detailed that description should be, and in particular, whether incidental graphics in the infographic should be described.

Generally speaking, the guidelines for alternative text for any image is that the text should focus on providing a succinct textual semantic equivalent of the graphic. For example, images that are fancy rendered text typically ("New!" in a fancy font with shading) have an alt text of just the text and don't describe the rendering; an image of a VCR-style play button is typically "play" instead of "right pointing triangle", and images of purely cosmetic images typically have empty alt text.

More details on how to create good ALT text for images can be found at this (WebAIM) and various other sites.

Applying these guidelines to infographics suggests that you should only describe the graphics if they are actually (a) conveying information that is (b) additional to the information conveyed by the text.

This means you can ignore any 'theme' graphics elements right off the bat.

If a graphic element is redundant with respect to text, you may be able to ignore that also. For example, in the case of text such as "80% of infographics are uninteresting" that has a pie-chart showing what 80% looks like, the pie chart is redundant with respect to the text, so does not need to be described separately: the text already covers that information. (However, if the graphic would cause a sighted user to infer particular emphasis on some point, ensure that the text also reflects this.)

From what I've seen of infographics so far, most of the graphics on them tends to fall into one of these first two categories, and while it adds to visual appeal, doesn't add additional semantic information, so doesn't need additional text.

The tricky cases with infographics are those cases where graphics are actually conveying information that is not conveyed in the text alone: these tend to be line graphs or comparative charts, and need to have a textual description of their own that conveys the information that a sighted user would see. This is one case where you need to take the goal of the chart into account, and come up with a description that makes sense in that context. For example, rather than describing a line chart as an exact series of numbers, describe the point it is illustrating: "sales revenue peaks in 2001, and falls to half two years later".

Or, long story short, your view on this (versus your colleague's) is the right approach. And a for what it's worth, one place where your colleague's level of detail might be appropriate is if the infographic was appearing on say a design blog site that was actually discussing the layout of the specific infographic itself: context matters a lot in terms of how images should be described. But in the usual case, the text should stick to the message(s) of the infographic, not the presentation.

Answer 4

I think the key is to be succinct but to also provide enough contextual information to ensure that the meaning of the embedded text is not lessened or altered in any way. For example, here's an image from the "a11y memes" Tumblr blog:

The caption goes beyond simply providing an accessible version of the embedded text. It also informs the user which meme is being used. If the caption just contained the embedded text, the context and humour would be lost.

By including just a little bit of additional descriptive text, the context of the embedded text is hugely enhanced, meaning that users with visual impairments are 'in' on the joke.

Answer 5

The alternative text for an image should let a user know what the image is they are missing. If the image related to any particular set of data/tables on the screen you should also reference which set of data the image belongs to. As long as the image explains those things you accessible users should be able to navigate to the appropriate location on the screen to get the information they are missing. Also if an image has embedded text, that text should appear in the alternative text.