Skip to Main Content
SJR State Learning Resources

Instructional Design Services  •  Library Services  •  Training & PD Resources

Course Accessibility Guidelines and Tutorials

Images

All images in your course must include alt-text descriptions or be marked as decorative in Canvas.

Alternative (alt) text is meant to convey the “why” of an image as it relates to the content of a document or webpage. An image's alt-text is read aloud to users by screen reader software and the alt-text of an image will display if an image does not load.

Perfect Accessibility Score iconGetting to Green

Ally doesn't gauge the quality of your alt-text - if there's alt-text provided, you get the green. But while you're engaging in this effort, take a moment to provide meaningful descriptions of the images in your course. Here are some tips:

  • When writing alt-text, keep it short and descriptive. Don’t include “image of” or “photo of” in the alt-text - the screen reader automatically conveys that information.
  • When an image is being used as an icon, the alt-text should convey the intent of the image, not describe the image itself. For example, the alt-text for this icon is “Visit our Facebook Page” rather than "Facebook logo". Visit our Facebook page
  • Use the alt-text to provide a textual alternative to the image so that people with a visual impairment can get an equivalent experience. Descriptions also make it easier for all students to connect the image with the context of your course. For example:

Example of a poor alt-text description: Westminster.png

Example of a meaningful alt-text description: 5 boats traveling on the Thames with the Palace of Westminster and Big Ben in the background.

Source: Blackboard Ally

  • Describing complex images such as charts, graphs and maps is important. If the data is crucial to the content of your course, at least a summary should be provided in the alt-text. In some cases, including the spreadsheet containing the chart data can provide additional clarity and accessibility. Below is an example of a chart with summary alt-text. 

Chart that shows the causes of deforestation in the Amazon between 2000 and 2005. 'Cattle ranches' are shown as the biggest cause of deforestation (60%), followed by 'small-scale, subsistence agriculture' (33%) and 'logging, legal and illegal' (6%). 'Large-scale commercial agriculture' is the smallest cause of deforestation with 1%.

Major issue foundMaking Fixes

Issue: The image does not have a description 

Most image issues will be due to the lack of a description - meaning there is no alt-text. 

The image does not have a description

Next, you'll be presented a list of images that need fixes as illustrated below.

Screen shot of list of images with no descriptions

The best way to fix this issue is at the page level. Fixing image issues at the page level is helpful because it allows you to see the image in context. This way you can make the determination if alt-text is sufficient or if providing more information about the image on the page itself would be helpful for students. In the next video, Christina demonstrates how to fix an image with no description within the course page.

 

Another way to fix this issue is to click each image listed here and either add alt-text or mark the image as decorative. Watch this video for a demonstration of this approach.