Writing Alt Text for Images (Text Version)

Below is the text version for the third podcast in the Introduction to Standards Podcast, Writing Alt Text for Images.

Welcome to the Introduction to Standards Podcast. I'm Elizabeth Spencer, and today I'll be talking about alt text! You can read more about this under Web Content Guidelines, under Accessibility, on the Alt Text page.

First off:  What is alt text?  You know how, when you hover your mouse cursor over an image, a yellow box with text will pop up? That's alt text.

Alt text is designed for visitors who use screen readers. Screen readers are programs that will read the content of a page aloud to someone—So if they can't see the page otherwise, they can use a screen reader to read it to them. When a screen reader finds an image, it reads the alt text.

So we write alt text as an alternative to people who can't see the images.

Now and then, you'll hear from someone who just puts their mouse over an image and tries to read the alt text before it disappears. This is all right! You don't need to. Alt text isn't designed for sighted visitors.

So, before I talk more about alt text: This is a part of Section 508. Section 508 basically says that all federal agencies are required to make all of their content available to everyone, and should thus be accessible to those with disabilities.

On the Web, this is important, because your visitors might have problems seeing or hearing content on the site, or they may have physical problems that make it hard to interact with it, or they might have cognitive problems that mean they need extra time to read your content. So you have to be considerate of these visitors whenever you post anything that isn't plain text.

This includes images of any sort.  Which brings us back to alt text!

Alt text should describe what the image looks like. This is different from the caption—Captions provide supplementary information. Captions are designed for ALL visitors, including the sighted users and those using screen readers, so alt text and captions shouldn't duplicate each other.

So! Now that you know what alt text is, how do you write it?  It's different for every type of image.

Normal Images

For most images, describe what is visually happening in the image. Pretend you're describing it to someone over the phone. Don't describe every detail. Just explain enough to understand the message of the picture.

Decorative Images

Some images have no meaning.  They're there to be pretty.  This might include things like page dividers or graphic bullets. If an image doesn't provide any information, you don't have to write alt text.

Linked Images

Sometimes, an image is a link—so you click on it to go somewhere. In this case, you have to make a choice: If the image includes useful information, describe the image AND list the page or file that it links to. If the image doesn't matter, only include the name of the page you're linking to in the alt text.

This image links to a page called "Maps," so that's what the alt text is: Maps. It's a picture of a map that reads "Maps," so adding anything else would be redundant.

Graphical Text

Sometimes an image only consists of words. For the alt text, just write out all the words in the image.

For this image, it says "Energy Savers," so that's what the alt text is.

Image Maps

Have you ever seen a huge image, and you can click different places on it, which all take you to different places? You have to write alt text for every clickable link.  Like linked images, you can just name the page that it goes to. If you need to, you can also, separately, write alt text for the ENTIRE image.

For this image, every state is independently labeled. So the alt text for "Colorado" is "Colorado." But every link has alt text.

Technical Diagrams, Graphs, and Charts

These are tricky! Let's say you have a graph. It has a lot of data. You'll need to write alt text that describes all of the meaningful information in that image. So normally your alt text would include every data point in that graph.

Or, if it's really huge, you can call out important data points and describe trends broadly.  You just have to make sure all the important information is in there.

This an example from the Wind and Water program. The alt text is long, but here's how it starts:

Pie chart of the fiscal year 2009 budget for the Wind and Water Power Program. All figures are in millions. The budget for wind power activities is $54.37, with $4.52 in low wind speed technology (8%), $3.5 in distributed wind technology (6%)…

And so on.

Detailed Maps

Sometimes an image is just too complex to describe in text. If there is really no other way, include a line beneath the image that says:

If you have a disability and need assistance reading this image, please email the Webmaster.

CSS Background Images

If you're a Web developer, you know what Cascading Style Sheets are. They can be used to make background images. Only use CSS background images for decorative images, because you can't use alt text with CSS.

And that's it!  Basically, describe images enough that they can be understood to someone who can't see them. If you aren't sure how much information is needed, please ask us here at Communication Standards! You can contact us on the site, by the Webmaster, or on the blog.

In our next podcast, we'll be talking about the rest of the process to develop a Web Project—So, the rest of the Web Process and Approvals page that we started in the last podcast.  See you next time!