Common mistakes
How screen readers interpret VS. how you may interpret
How to add alt text to an image
General rules for all alt text
Decorative images
Images that contain words
Complex graphs or charts
Additional resources

Images not only provide visual appeal to our pages, but they also convey important information. The old adage, that a picture tells a thousand words, can be very true! The problem occurs when we add an image that provides the content to our students, but fail to provide an adequate text alternative for students who are visually impaired. The alternative text - called alt text for short - feature allows you to provide a description of the image.

There are times when images not only provide information, they also serve a function, such as a button or links to additional resources. In this case, the alt text should clarify the function.

There are scenarios where descriptive alt text is not required - sometimes a cigar is just a cigar, and sometimes an image is just there for visual appeal. It's purely decorative. In this case, alt text is not necessary, as the image has no value to a student using assistive technology. Many images, however, have a pedagogical purpose, and, therefore, require a description explaining the information the image conveys.

Common mistakes

The common mistakes with alternative text can be summed up in a very short list:

A purely decorative image does not have a "null" alt text.
The file name, including .png or .jpg is used instead of alt text.
No alt text is provided for an image that has pedagogical value.
Not enough alt text is provided to explain content-rich images, such as graphs and charts.
The actual text of the alt text contains redundant information or words.

How screen readers interpret VS. how you may interpret

Watch this video to understand how a screen reader interprets images.

How to add alt text to an image

Watch this video to learn how to add alt text to an image in Canvas:

If image already exists on page

To add alt text to an image, select the embedded image tool located in the RCE:

Alt Text location in RCE

The Insert/Edit Image dialog box will open. Under Attributes, add the alt text.

If uploading a new image

Canvas has a new feature that allows you to add the alt text as a new image is uploaded. In the Edit view, on the far right-hand side of the page, the Content Selector menu provides a dedicated space to place your alt text while uploading the new image.

Screenshot: Content Selector with Alternative text option higlighted.

General rules for all alt text

The accessibility experts at WebAim provide the following guidelines. The alt text should:

Be equivalent in presenting the same content in and function of the image.
Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as concisely as is appropriate. Typically no more than 10 words.
Avoid using the phrases "image of" or "graphic of" to describe the image. The screen reader will announce the image. If the medium of the image is an important aspect (such as a photograph or oil painting), then the medium should be included.
Avoid containing file extensions such as .jpg or .png

Decorative images

Images that are purely decorative, and have no pedagogical value (other than to provide visual appeal to a page) do not require a descriptive alt text.

If image already exists on page

To add alt text to a decorative image, go to the embedded image icon, which is located in the toolbar:

Alt Text location in RCE

The Insert/Edit Image dialog box will open:

Decorative option in Image/Edit Image Window

If uploading a new image

Canvas provides a Decorative Check Box Option as a new image is uploaded. In the Edit view, on the far right-hand side of the page on the Content Selector menu, check the Decorative Image box.

Decorative Option in Content Selector

Images that contain words

Per W3C standards, it is good design practice to use actual text that is styled with CSS rather than image-based text presentation. This allows all of our students to immediately interact with content, rather than adding an additional layer of navigation for content through the usage of alt text. (Briefly, CSS or Cascading Style Sheets is a page layout code that affects the "look" of the page. Think of HTML like the cake and CSS like the frosting and sprinkles.)

Unfortunately, Canvas is very limiting in allowing us to manage the HTML and CSS (plus that's a bit much to learn!)

Fortunately, we can leverage Canvas and use the RCE to create our text. We recommend limiting the number of images that contain text. For example, if decorative module banners are used throughout the course, consider limiting the decorative module banners to a couple if absolutely necessary.

Example 1: making a statement when students first enter your course

Text in banner limited only on front page in Canvas Course.

Perhaps the Front Page can have a single welcome banner image with text since the Front Page has the most impact. It is acceptable to have a text banner or two, but we recommend limiting the number of decorative text banner images to help all students easily access essential information. The alt text for this banner is "Microsoft Word Accessibility Self-Paced Micro-Course."

The banner used Canva's "Sound Cloud Banner" template which creates a very wide graphic that takes a significant amount of space.

Example 2: non-textual decorative banners

Banner is marked as "decorative" and has no text.

Notice how the banner has no text but serves as a decorative feature to add interest and sets a friendly tone. Also, note how the banner is a lot thinner to allow learners to quickly access the content. Larger banners, although nice, may take a couple of scrolls in order to access the content. It is appropriate to mark this image as "decorative" as it does not support or reinforce any relevant content.

Complex graphs or charts

Complex images contain substantial information – more than can be conveyed in a short phrase or sentence. These are typically:

Graphs and charts, including flow charts and organizational charts;
Diagrams and illustrations where the page text relies on the user being able to understand the image;
Maps showing locations or other information such as weather systems.

In these cases, a two-part text alternative is required. The first part is the short description to identify the image and, where appropriate, indicate the location of the long description. The second part is the long description – a textual representation of the essential information conveyed by the image. This long description can be placed directly on the Canvas page near the complex image. The following examples show different approaches that can be used to provide such short and long descriptions.

Images that are text-rich, contain complex graphs or charts, and/or that really do need a thousand words to explain them require more than alt text. The information delivered by the image can be explained in the text preceding or following the image. If this would be highly redundant for sighted users, the text can be in a separate web page or document, and a link to the long description can be provided adjacent to the image.

What is the most effective approach for a complex image like this?

The complex graph image example below has text, a pie graph with annotations, and has two chunks of text surrounding a three-column table.

In a Canvas page, the following should be displayed:

The "Reasons for Inaccessibility" title would either be the Canvas page or a heading level (I would recommend creating a different page title as the title of the page and title of the graph are redundant.)
If the "Reasons for Inaccessibility" is not the Canvas page title, it should be written as a heading 2, 3, or 4 on the Canvas page
The complex graph should be the only image that provides a summary of what essential points are being conveyed
"Which of the following do you think is the primary reason that..." sentence should be displayed as the table caption on the Canvas page
The table should be formatted on the Canvas page in an accessible table on the Canvas page
"When compared to answers from previous surveys," sentence should be written in the RCE of the Canvas page

Review accessible version of this infographic on a Canvas page.

Reasons for Inaccessibility Chart, described in the link Reasons for Inaccessibility Description

Additional resources

WebAim: Alternative Text

W3C: Images Concepts

"Survey of Web Accessibility Practitioners Results" by WebAIM , WebAIM is licensed under CC BY 4.0 / A derivative from the original work