Using Alt Text
Practice

Alt Text Basics

Alternative text—a written description of non-text content in web pages—has two important functions for accessibility:

It's read by screen reader devices in place of images, allowing the content and function of the image to be understandable to those with visual or certain cognitive disabilities.
It's displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.

Writing good alt text can be a bit more of an art than a science. It should be succinct—not more than 20 words is the recommendation—while communicating the "experience" of the image. A lot depends on the context of the page content where the image is being presented. If much about the image is already described in the surrounding text, the alt text can be quite brief.

Tips for Writing Alt Text

Ask yourself: "Why am I using this image? What information is it meant to convey?” (What's the pedagogical context?)
Keep it concise yet informative (convey the full experience of the image).
Don't include "image of" or "picture of" in the alt text; the screen reader will indicate it's an image. An exception would be if it's germane to the learner's experience to know, for example, that the image is a photo collage or an engraved illustration, for example.
Remove the file type (.jpg, .png, etc.) from the alt text

Example

Not So Good

pauli murray

Alt Text: Pauli Murray

Good

pauli murray, civil rights activist.

Alt Text: Pauli Murray, civil rights activist. "Hope is a song in a weary throat!"

When Is Alt Text Not Needed?

If an image is purely decorative and provides no useful information to the learner. For example, a picture of a butterfly on your syllabus page.
If the information provided by the image is conveyed effectively elsewhere in the page content. In this case, providing alt text would be redundant.

"Null" or decorative alt text is indicated by an empty set of quotation marks. In the HTML img tag, it would look like: alt="". In Canvas, select the "decorative image" box within the "Insert/Edit Image" dialogue box as shown below.

Formatting Alt Text with Canvas' Rich Content Editor (RCE)

Once the page editor is open, click on the image and select the "Image Options" button.
From the slider window, enter the appropriate text in the Alt Text field (or mark as Decorative)
Click Done and save the page.

Additional Resources

Because alt text is so important to the full comprehension of page content, and is so often misunderstood and done incorrectly, we strongly recommend that you use these two resources as guides:

The Definitive Guide to Alt Text
WebAIM: Alternative Text

Alt Text Demo

Put It Into Practice

Using the images and associated text for context, write alt text for both images below.

Example 1

Are you training your puppy to walk on the leash? Or — let's be honest here — is your puppy training you?

Leash training can be difficult, but it's a necessary skill if the two of you are to enjoy walks and adventures together. It's also a skill you should start practicing as soon as you bring home your new furry friend. When your dog is walking alongside you on a loose leash — also called "heeling" — heap on the praise and reward him with the occasional treat.

Example 2

The scientific method is a series of steps followed by scientific investigators to answer specific questions about the natural world.

The principles and empirical processes of discovery and demonstration considered characteristic of scientific investigation generally involve the observation of phenomena, the formulation of a hypothesis concerning the phenomena, experimentation to test the hypothesis, and development of a conclusion that confirms, rejects, or modifies the hypothesis.

In summary, the steps are as follows:

Observation
Question
Hypothesis
Experiment
Analysis (or Results)
Conclusion

You can check your "answers" to these activities at the end of the module.

Please be sure to view both tabs before clicking Next