Alt Text: Writing Effective Alternatives

Reading | Video | Quick Check

Alt Text Basics

Images can convey key information as well as visual interest. Alt text (alternative text) ensures that screen reader users—and people who disable images—still get the purpose or content of the image.

When an image is functional (for example, a button or link), the alt text should communicate the function. When an image is purely decorative, it should be marked as decorative so it’s skipped by assistive technologies.

How HTML handles alt text:

Image with the file name: pizza.png.

slice of pizza

Corresponding HTML alt text. A screen reader might announce the image and then read “slice of pizza on a plate.” Exact announcements vary by screen reader and settings.

alt="slice of pizza on a plate"

If this same piece of pizza were marked as decorative, a screen reader would skip over it entirely. More on that below!

Common Mistakes

Decorative images are given descriptive alt text instead of a null alt ("") (or decorative flag).
The file name (for example, IMG_3543.jpg) is used as the alt text.
No alt text is provided for images that carry meaning.
Too little detail is provided for meaningful images (trying to describe a chart in a few words).
Alt text includes redundant phrases like “image of…” or repeats nearby captions verbatim.

How to Write and Add Alt Text

Please review all of the following tabs:

Fundamentals

General Rules

Match intent: Convey the same content or function the image provides. Ask: “Why am I using this image? What information is it meant to convey?”
Be concise: Aim for a short phrase or sentence. Include what’s necessary; skip what isn’t. If you can’t convey the full meaning briefly, you may need a longer description elsewhere (covered on the next page).
- Canvas’s Rich Content Editor checker currently recommends fewer than 120 characters for alt text. This is a Canvas checker recommendation, not a screen-reader limit. If the image needs more explanation, use brief alt text together with a nearby or linked complex-image description.
Skip “image of”: Screen readers already announce images. Include the medium only if it matters (for example, “oil painting”).

Functional images (buttons, links)

State the action or destination, not the visual appearance.

Good:  alt="Submit form"
Bad:   alt="Green arrow button"

Examples

Check out PopeTech’s: Alternative Text in the Wild

Banner for Alternative Text in the Wild with examples of alt text for animals.

Adding Alt Text in RCE

Adding Alt Text with Canvas’ Rich Content Editor (RCE)

In the page editor, click the image to select it (you’ll see a border and an “Image Options” popup).
Select Image Options.
In the sidebar, enter your alt text.
Select Done, then Save.

Alt Text Guidelines Video

Alternative Text for Images

An overview of guidelines for alternative text on images, with instructions for creating alt text in Canvas. (Length: 4:21)

To access captions or change playback settings:

Select “Subtitles/CC” to turn on captions in English or other available languages.
Adjust playback speed in Settings to slow down or speed up the video.
If you experience loading issues, watch Alternative Text on a separate page.

Decorative Images

When Is Alt Text Not Needed?

If an image is purely decorative and provides no useful information to the learner.
If the information in the image is already conveyed effectively elsewhere on the page.

Null (decorative) alt text is indicated by an empty alt attribute: alt="". In Canvas, select the Decorative Image option in Image Options.

Marking an Image as Decorative in RCE

In the page editor, click the image to select it.
Select Image Options.
Select Decorative Image.
Select Done, then Save.

Canvas Image Options sidebar showing the Decorative Image option.

Decorative = no information conveyed; the page remains understandable without the image.

Images with Text

If the image contains important words (for example, a graphic header or sign), include those words in the alt text.

Graphic that reads: Welcome! Accessibility Workshop — Getting Started.


Alt text:   "Welcome! Accessibility Workshop — Getting Started"

Whenever possible, avoid images of text; use real text for sharper rendering and better responsiveness.

Canvas Guides

Text and Video: Canvas Guides to Alt Text

Alt Text and Display Options (Length: 2:23)

To access captions or change playback settings:

Select “Subtitles/CC” to turn on captions in English or other available languages.
Adjust playback speed in Settings to slow down or speed up the video.
If you experience loading issues, watch Alt Text in RCE on a separate page.

Quick Check

Which alt text is best for a magnifying-glass icon that is a button to open site search?

alt="Magnifying glass icon": Describes appearance, not function.
alt="Search": Correct: Functional images should communicate the action or destination.
alt="Click here to search the site using the search field": Too wordy. Keep alt text concise and purposeful.

Check Answer

Connection

Alt text is one of those things most people never notice—until they need it. For someone using a screen reader (or with images turned off), alt text is the difference between “this page makes sense” and “this page is full of blank spots.”

As you move through this course, keep coming back to one question: If I couldn’t see this image, what would I still need in order to understand the point being made here?

Hear What the Author Supplies

When useful alt text is missing, an image may be announced by its filename instead of its purpose.

A filename is used

Transcript

“Pizza dot P N G, image.”

The listener learns the filename, not what the image contributes.

Useful alt text is provided

Transcript

“Slice of pizza, image.”

The listener receives the short description supplied by the author.

Exact announcements vary by screen reader, browser or app, and user settings.