Objective
What is it?
Alternative Text (Alt-Text) is a description that provides a textual alternative to non-text content in on a page. This text will be read aloud to a person using a screen reader or appear in place of the image if it fails to load. By default, Canvas includes the file name as the alt text; the file name should be changed to something more descriptive when embedding images. Alt text is not the same as the image title, which generates text when users hover over the image.
Why do it?
Using alternative text can help individuals who use screen readers understand what they are looking at; this is especially helpful for non-sighted students. When students hear file names repeatedly or images containing important information are marked as decorative, they miss out on information they may need to understand a concept in the course.
Examples
Check out the example below of what bad, okay, and good alternative text looks like for this image of a bear [courtesy of supercooldesign.coLinks to an external site.].
Bad: We're zoomed-in on the face of a brown bear – sometimes known as a grizzly – gazing majestically into the middle distance. Perhaps she's hungry, or has spotted a threat?
Why? If you need to say this much, add it as part of the text on the page. Keep alt text short. And remember – do not make any assumptions.
Bad: bear, brown bear, grizzly, grizzly bear, mammal, carnivore
Why? Read this aloud. This is not helpful – and Google won't like it.
Okay: Brown bear
Why? This is fine but you could describe the image more clearly.
Good: Close-up of a bear's face
Why? This gives a clear understanding of what's in the image within just a few words, and makes no assumptions. (I'm not totally sure what type of bear this is 🤷)
Users
Steps
Although writing good alt-text may take some practice for comfortability, below are some key practices to follow when writing alt-text for images:
- Keep it short and concise; less than 120 characters is ideal
- Describe what you see in the image - being descriptive allows you to build the picture for someone who can't see it [e.g. describe it as if you're explaining something over the phone]
- Include all text that is in the image, unless it repeats what is on the page or the image caption
- Never start with "image of..." but do describe the type of image it is [e.g. headshot, chart, etc.]
- For diagrams that require longer explanations, explain the image on the page and use a brief description for the alt text of what it is [ex: stomach diagram]
- Mark the image as decorative if it is not important for the learning material or only for decorative purposes.
Adding Alt Text in Canvas
To add Alt-Text, click on the image after you've embedded it, and choose image options. When the image options open, you are then able to add in descriptive alt-text, explaining what it is. If the image has no effect on the students learning, you can also click, "decorative image" and the screen reader will skip it.
For additional resources on adding Alt Text in Canvas, check out the How do I manage alt text and display options for images embedded in the Rich Content Editor? Canvas guide.