Overview

This lesson will address the importance of alt text for images and how to write good alt text.

Core Concepts

Alt Text for Images

Alt text (alternative text) is a textual description of an image. The description should be specific to the context in which the image is being displayed - think about what information is being conveyed in the picture that the student needs to know.

Once you've added alt text to an image you will not see the alt text. Alt text is only displayed if the image fails to load. If someone is using a screen reader, once they navigate to the image the screen reader will announce that there is an image and then read the description (so you don't need to write "image of" when inputting your alt text).

If you do not add alt text to images often the image file name or the URL will be read.

How to Write Good Alt Text

Alt text should be accurate, concise, and not redundant to the surrounding text. When determining what to write for alt text think about the purpose the image serves and what you would want to display if the image did not load. Focus on describing the information in the image, not the image itself (e.g. if you were writing alt text for an image of the White House, you would write "the White House", not "a white mansion built in the neoclassical style with a columned semi-circular portico").

If an image is being used on a website to link to another page or location, the alt text should tell the user where that link takes them. For instance, if the image below was used as a button to return to the home page you would put "home page" as the alt text and not "black shape of a house on a turquoise button". The function of the image is more valuable information than the look of the image.

Home page button

Null Alt Text

Null alt text is used when images are purely decorative or the image presents redundant info that provided in the text. When you use null alt text a screen reader will skip over the image entirely. You must input null alt text if you want an image to be ignored.

How to add null alt text depends on the program and version you are using, so the steps will be discussed in the Accessibility Skills courses.

Check Your Understanding:

How can you tell an image has alt text?

A. If the image doesn't load and a text description appears instead.

Correct.

B. It will appear below the image, as a caption.

Incorrect.
While captions are often descriptive text of the image, they are not the same as alt text. If an image loads properly you actually won't see the alt text at all.

C. Sometimes you can't tell.

Correct.
If an image loads properly you actually won't see the alt text at all. Though, there are tools that you can use to check for alt text if you need to.

Video Supplements

Screen Reader: Image without Alt Text (32 seconds)

This video from the Assistive Technology Resource Center at Colorado State University demonstrates why Alt Text is important.

Screen Reader: Image with Alt Text

Additional Resources

WebAIM - Alternative Text - This is a fabulous site for best practices when writing alt text. It provides a few examples to work through, but it is more aimed at websites when it comes to how to add null alt text.
Write Good Alt Text to Describe Images from Harvard University
Charts & Diagrams Alt Text from the University of South Carolina