How do I add useful Alt text to a hyperlinked image?

You will learn how to add useful alt text to a hyperlinked image in your course in Canvas.

In this case, a Page is being used. The images within the Rich Content Editor are hyperlinked to other locations within the course.

Canvas Page with text and hyperlinked images

2. Click on the Edit button.

Edit button selected

3. Note the Accessibility Checker icon.

The Accessibility Checker has the number 3 next to it to indicate that it has found three issues within this Rich Content Editor.

Accessibility icon shown

There are two ways to create useful Alt text for these images which have hyperlinks.

I want to use the Accessibility Checker.

1. Click on the Accessibility Icon.

Accessibility Checker icon selected

2. Click on the Alt Text field.

Note that the Alt text filed currently has the name of the image file. This is considered to be inappropriate Alt text.

Alt Text field selected

"Link to..." is useful verbiage for an image that has a hyperlink. This lets the person using a screen reader know quickly and easily where the image links to. This is more useful than marking the image as "decorative".

Alt Text field has "Link to Announcements" in it.

4. Click on Apply.

Apply button

5. Repeat for each additional hyperlinked image.

Change Alt text screen is shown again.

6. Once you are finished, you should see this message that there are no accessibility issues.

No issues found message

7. Click on Save.

Save button

The Alt text for those images is now set.

Article Summary

You have now learned how to create useful Alt text for an image that has a hyperlink.

I want to use the Image Options.

1. Click on the image

Announcements image selected

2. Click on Image Options.

Image Option is selected

3. Click on the Alt Text field.

The Alt Text field is showing the name of the file which is considered to be inappropriate for an image this is hyperlinked. It is better to use text that lets the user know where the image links to.

Alt Text field

In this example, "Link to Announcements" lets the user know where the image links to.

Alt Text field states "Link to Announcements"

5. Click on Done.

Done button

6. Click on Save.

Save button (2)

Article Summary

You have now learned how to create useful Alt text for an image that has a hyperlink.