Alternative text, or “alt text”, is what we attach to most images so that screen readers and other Assistive Technologies can convey the meaning of those images to low-vision and non-sighted users. This is what WCAG 2.0 specifies about alt text in their guidelines:
There are a few notable exceptions to this rule outlined in the guideline itself, and you should take the time to familiarize yourself with those exceptions. This article will focus on those times when alt text is necessary and how we as content creators can maximize the impact of our alt text for our users.
When is Alt Text Necessary?
In short, alt text is necessary almost all of the time. Let’s talk about the most frequent situations.
When the Image Itself has Content
For the most part, it is best practice to avoid images that contain text. Screen readers and other assistive technologies can’t read text within images (they only see a series of unrelated pixels) and the text within an image can become hopelessly distorted if the image needs to be resized for any reason. If you must include an image that contains textual content, follow these rules:
- Organization Logos
- Logos do not need any other alt text besides “(organization’s name) logo”. For example, “CPM logo” or “OKDHS logo”. This is true even if the logo contains a catchphrase or branding.
- Quick Reference Images
- Sometimes you must include an image of a hotline number or office hours or something similar. Alt text for these images must include all text in the image itself.
- Charts and Graphs
- When charts and/or graphs are included, it is best practice to discuss all pertinent information about the chart or graph in the surrounding text. Then add an alt text to the chart or graph that highlights the important (or “at-a-glance”) fact or statistic from the image.
Flowcharts – a Cautionary Tale
Many content creators want to add flowcharts to their documents and articles. After all, who doesn’t love a complicated process with a complex decision tree (or trees) broken down into a visually-appealing and easy-to-follow chart that allows you to ignore the paths of the process that don’t immediately pertain to the task at hand? Spoiler alert – screen readers don’t!
Flowcharts are purely visual tools that were invented to make big processes easier to read. And as such, they add little to no value for those users with low vision or who are non-sighted.
The good news is that you can still include a flowchart in your document or article for those users that can see them. The alt text simply needs to read “(process) flowchart”. The bad news is that even with a flowchart, a content creator must still include a complete description of the process within the document or article itself.
When the Image Enhances or Augments the Text
This is the simplest and easiest situation in which to add alt text. The images included help to enhance the text in the document or article. Examples might include a headshot of the Keynote Speaker next to the speaker’s bio, an image of children playing on the playground when discussing the importance of physical play in child development, or pictures of the actual dishes in an online menu.
The alt text for these images should be descriptive and concise.
When the Image Conveyes Meaning
Very few content creators add images to their articles and documents with no forethought as to what the image represents. And while it is true that some images are added to visually break-up large blocks of text and make the document or article more visually appealing, these images are often chosen based on what meaning is conveyed.
For example, consider the following blurb about Oklahoma weather:
And now consider the same blurb with a different image attached.
It could be argued that the first image gives a sense of nice weather and sunny (albeit hot) days, while the second image conveys a much more sinister and possibly dangerous storm situation, and it could be further argued that this meaning affects the overall meaning of the text near the image. This subtle but powerful difference in meaning would get lost in translation if we simply added “Oklahoma skies” as the alt text.
A better choice for our alt text helps convey the same meaning as the image itself. Something like “A blue sky over a beautiful lake” for the first image and “Storm clouds over a hay field” for the second image would do nicely.
Just for Decoration – the “Smiling Lady” Argument
Sometimes content creators put an image in just to give the content more variety. For example, they write an article about customer service and want to include a picture of a customer service representative, a smiling woman, in the article. But in reality, the smiling woman isn’t integral to the article and doesn’t really add any meaning. After all, it doesn’t matter if she’s young or old, if her hair is brunette or blonde, or even that she’s a woman. It could just as easily be a smiling man. Or a smiling customer. Or not a person at all, but a smiley face, some dollar signs, two hands shaking, etc.
Some content creators have argued that these images fall under the “purely decorative” exception rule of WCAG 2.0, and therefor do not require alt text. In fact, they argue that adding alt text to these images actually reduces accessibility by making non-sighted users trudge through images that sighted users naturally gloss over while reading.
But this argument only assumes two types of users: sighted users, and users that are totally blind. What about all the gradients in between? There are plenty of people with varying degrees of low vision that can see that something is there, and it may just be a little fuzzy or a mass of colored blobs. Everyone wearing corrective lenses has some form of low vision.
It is a good idea to add the “smiling lady” alt text for those users. That way, when they come to an image that they can’t make out, they don’t have to wonder what it is, or if the content creator forgot to add the alt text out of carelessness or incompetence. Adding the alt text removes these uncertainties and allows the low-vision user to enjoy the image as much (or as little) as sighted users do.
Alternative Text Pitfalls to Avoid
For all our good intentions, sometimes content creators will make mistakes. And sometimes, we may not even realize it. Here are some egregious mistakes to avoid:
- Do not include “Image of”, “Picture of”, or the like in your alt text. Screen readers already inform users that what’s being described to them is an image.
- Do not use the image file name as the alt text. “Application_screen_1” doesn’t tell the user what is important within the image. “Img_01A342” is even worse.
- Do not go into excessive detail in your alt text. Stick to what’s important and keep it concise. “A man wearing a nice suit is on the phone at a desk in an office with two windows overlooking a city skyline,” is way too long for alt text. “Case worker on the phone,” would be much better (and will save you some typing).
- Do not repeat alt text phrases. Make each one on a page unique. If your article is about kittens and you have four images all with the alt text “kitty”, non-sighted users can become confused as to where they are on the page. Make each alt text slightly different: “Warm kitty,” “Soft kitty,” “Happy kitty,” “Sleepy kitty,” etc.