Adding Alt Text to an Image in Canvas

 

Summary

This document will show you how to add an image with Alt text to a Rich Content Editor in Canvas.

Alt text is text that appears when you mouse over an image. It is also what a screen reader reads out when interpreting images. Alt text is helpful for many users for many different reasons which is why it is considered a fundamental element of building a well designed Canvas Course.

Add image to Rich Content Editor with Alt Text

Canvas employs the Rich Content Editor(RCE) tool to enable users to add text and images within the website. The RCE can be found in Announcements, Assignments, Quiz Questions, Modules, etc.

  • When in a Rich Content Editor, select the image symbol from the RCE menu.

  • Select the image type being added (Upload Image, Course Images, User Images).

When in a Rich Content Editor, select the image symbol from the RCE menu.  Select the image type being added (Upload Image, Course Images, User Images).
  • When uploading an image the user has the option to:

    • Type an image description in the Alt Text text-box.

    • Or, select “Decorative Image” box to check.

  • Select Submit when complete.

When uploading an image the user has the option to Type an image description in the Alt Text text-box.  Or, select  Decorative Image box to check. Select Submit when complete.

 

Edit or Add Alt Text to an Image that is Already Embedded in the RCE

  • From the RCE, click on the image.

  • The image will show as selected and a white “Image Options” button will appear on the image. Select Image Options button.

  • A menu will pull up on the right-hand side of the screen:

    • Add the image description in the provided Alt Text text-box.

    • Or ,select the “Decorative Image” checkbox.

  • Select Done when complete.

From the RCE click on the image.  The image will show as selected and a white Image Options button will appear on the image.  Select Image Options button.  A menu will pull up on the righthand side of the screen  Add the image description in the provided Alt Text textbox.  Or ,select the Decorative Image checkbox.  Select Done when complete.

 

Need Help Writing a Good Image Description?

Review Alt Text Guidelines

When embedding an image, add alt text to the image to help students who can't see the screen and use a screen reader. It is best to describe what is in the image, including any text or numbers within. Keep the description as short as you can - typically only a few words are used, although when describing a more complex image a sentence or two may be used. Do not use the phrases "Image of...", "Graphic of..." or any similar phrases, as it is apparent to the user that it is an image.

For example, imagine embedding a chart (in an image format) showing the percentage of Americans who find it important that America remain a global leader in space exploration. You might include the following alt text:

27% of Americans believe it is not essential for the U.S. to remain a global leader in space exploration, while 72% believe it is important

In conjunction with the surrounding context, this alt text would convey the entire meaning (and only the meaning) of the chart.

However, if you were to embed an image of a space shuttle, the phrase "space shuttle" would be the perfect alt text for that image.

There are many more good practices regarding alt text, which can be found in the WebAIM Alternative Text article.

Additional Resources

Have an issue or article suggestion?

Email us! lts@boisestate.edu