Designing for Accessibility: Shortening the Learning Curve. (part three: writing good alt-text)
By: Todd Chambers
Tags: Design Process, Accessibility, Experience Design, UX, Product Design

Let’s continue with the example above. To ensure that all readers could benefit from my use of the image, I chose to include the following alternative text: “A seated person operates an Apple laptop computer by using the trackpad.”

To arrive at that copy, I first needed to make a few decisions. And since not all images are created equally, you’ll also need a way to determine the best copy for any given instance.

Use this simple matrix when determining how and when to use alternative text in your content

QUESTION 1: Should this particular image have alternative text?

As important as alternative text is to ensuring blind users have equal access to your content, not all images should use them.

Generally speaking, you should provide an alternative text with all non-decorative image files. These can include icons, graphics, illustrations, photographs, charts, and memes.

QUESTION 2: Is this a decorative image?

For many people, identifying decorative images seems tricky. To uncomplicate things, just ask yourself this question: “If the image were removed, would the user relying on the screen reading devise miss any important information?”

If removing the image diminishes the experience of the non-sighted user in any way, then it requires alternative text. If removing the image makes no difference to the experience, then you can skip it.

NOTE: To avoid the previously mentioned awkwardness of the screen reading devise announcing “Image” when there is no alternative text included, you should instead provide an empty alt element to all decorative images. Use this simple code snippet: (alt=’’ ”). This will ensure that the screen reading device will completely skip any mention of the image.

You can learn more about identifying decorative images by visiting the following link from the W3C: https://www.w3.org/WAI/tutorials/images/decorative/

QUESTION 3: How would I explain this image to a friend?

For optimal impact, write the alternative text copy as if you were sitting with someone and personally describing the content they can’t see. To return to our earlier example, simply describing the image as “person with computer” would technically be accurate, but it wouldn’t be very friendly, nor would it be fully descriptive. Including in the description that the person is seated, working on a laptop, and operating the trackpad, each adds context and specificity to the description.

Pro tip: Use this veriation of the golden rule. Write alternative text copy the way you’d want it read to you.

QUESTION 4: Does the image contain data?

If you’re describing a chart, a graph, or a data table, it’s imperative that you mention the important details that would otherwise only be perceived visually. This might include things like the X/Y axis labels of a graph, the titles of table headers, or the key statistics from the pie chart.

While there’s no way you can include all the details from a complex data visualization, you can highlight the main takeaways. Here, again the golden rule comes into play.

REMINDER: Alternative text is not an SEO-play

A quick word of caution. Don’t mistake alternative text as an opportunity to keyword-stuff.

It’s very common for SEO teams and marketing managers to push for this. And understandably so. Alternative text is invisible to most users but read by all search engine spiders. Many people see that as an easy way to add keywords to their content thereby upping their chances of receiving a higher page ranking in user’s search results.

If you’re asked to do this, please push back. It’s a horrible experience for your non-sighted users.