#6: Tag Images with Alt Text

Tagging your images with alternative text allows for a description of the image to students with visual acuities. Not only do you want to make sure that you include alternate text, but you also need to make sure what you write is applicable in the overall flow of the page.

Write tags that are descriptive and meaningful

If you were talking very specifically about the Flickr collection, World War II, and dog mascots, you may want to put in a tag of something along the lines of, "Black and white photo of puppy mascot, being dried after a bath." Usually, you would not include the word "photo" as a screen reader can detect an image - but in this case, the black and white photo part of it is crucial information in the description.

However, if you were just including a picture of a dog, and further context was not necessary, you could put "Drying a puppy after his bath."

Alt-text is context-dependent

Alt-text is not part of the image, it is part of where the image is displayed so there is no way to store the alt-text on the image. To practice good pedagogy and accessibility, it makes sense to set the alt-text as the same image might have different alt-text in different situations; for example, the Mona Lisa might have alt-text of "Leonardo da Vinci's The Mona Lisa" in an art history class, but when the image is displayed in a quiz question the alt-text might read "A famous painting by Leonardo da Vinci, a portrait of a young woman with a wry smile."

Accessibility guidelines for visual content include:

  • Always add alternative text to images. 
  • For decorative images, use alt="" for the alt text
  • For text-based image, the alt text should be the same as the text in the image
  • For images that serve as links, the alt text should give the link context.

How to Add Alt Text:

Option 1: Change File Name

In Canvas, the file name is the default ALT text which is normally not recommended, but if you change the file name to the ALT text, it will always be inserted when the image is placed into Canvas content.

  1. Upload your image Links to an external site. into the Files area of your Canvas course.
  2. In the Files area, rename your file Links to an external site. to match your default ALT text.
  3. To embed an image, open the Canvas Rich Text Editor. Links to an external site.
  4. In the image tab on the right, click the image with the ALT text title Links to an external site. to add it to the content.

Option 2: Add or Edit ALT Text in Rich Content Editor

  1. Open the Canvas Rich Text Editor Links to an external site. to content which includes an image.
  2. Click on an image added to content to highlight it.
  3. Click the Embed Image icon to open the Insert/Edit Image properties window.
  4. Add the ALT text into the ALT text field in the Attributes area of the window.

circles around Canvas and ALT Text for image source and attributes

 

Example from the Accessibility Demo:

 

word cloud containing words related to accessibility

Image Caption: When thinking about accessibility, many different themes may come to mind. In the above word cloud, some of the other ideas related to accessibility include “disabilities,” “design,” “transcripts,” “organization,” and “adaptations.”