WHAT IS ALT TEXT?

Alt text, or alternative text, is text used to describe the content and function of an image. When a screen reader program encounters an image, it will read the alt text. The goal of alt text is to provide an equivalent textual representation of an image.

ACCESSIBILITY FOR EVERYONE

Alt text doesn't just help users with screen readers. It can also help individuals with cognitive or learning disabilities, as well as users with poor internet connections or mobile data caps.

In Canvas, alt text is set when you select Upload Image. Look for the box called "Alt Text" under the Attributes section. You can also change alt text on an existing image by selecting the image and selecting "Image Options."

Important Note

Always include alt text or check the "Decorative Image" box. If you don't, Canvas will automatically insert the filename as the alt text, which is not accessible.

WHICH IMAGES NEED ALT TEXT?

Not all images need alt text. In fact, if you put alt text on all images, you are likely to frustrate users with screen readers.

Any image that is essential to the content or function of the page requires alt text. Any image that is ;not essential to the content or function of the page should instead have the box "Decorative Image" checked.

While some images are obviously decorative, it can be difficult to determine for many images. A question you can ask yourself is: Would a user have a worse experience of this page if they didn't see this image?

Take, for instance, a logo. When a logo is at the top of a page, it generally informs users of what website they are on. Logos almost always have alt text, then, since not having it can make it confusing what site you are on.

Ball State University Logo

The most important factor in determining whether or not to include alt text, then, is the context for the image. Take this photo of David Letterman on Ball State's campus (source: Wikimedia Commons). Should it include alt text?

If this photo was on the page right next to a quote attributed to David Letterman, it would not require alt text. It is not adding to the content of the page. The experience of any who cannot see the image is not harmed in any meaningful way.

On the other hand, if this photo was in an article about different approaches to comedy, and the photo was showing David Letterman as an example of a particular approach, it would require alt text. In this situation, knowing that David Letterman is an example of that approach to comedy affects the comprehension of learners.

Any image with readable text on it should replicate that text exactly in alt text or in the surrounding text.

While there are no hard and fast rules about alt text, there are a few types of images that almost always need alt text and almost never need alt text.

Almost Always Need Alt Text

Logos
Quotations or other text
Images used as interactive components, such as buttons
Icons used to convey important information, such as file types
Screenshots with directions/highlights

Almost Never Need Alt Text

Photos of people next to a bio or attributed quote
Images that contribute to the aesthetic feel of a page
Stock images used to break up text content
Background images
Lines, textures, or other non-interactive page elements
Images that are described in the surrounding text or a caption

On our next page, we'll look at how to write effective alt text.

Quick Recap

Alt text describes the content and function of an image. Images that convey important meaning should have alt text, while images that do not should have the decorative box checked.

Further Reading

Alternative Text (WebAIM)
Story of a blind user interacting with alt text
Complex Images: Diagrams, Graphs, Maps, Art, and More