Alternative Text (Alt Text)

ASL Interpreter helping a student and professor communicate in class

Professor presenting a slideshow to his class

Guest speaker, Ken Petry, speaks at a past Access MU symposium to a large audience

The varsity hockey team glides across the ice with members of the Best Buddies Choir

Alternative Text (Alt text) is a textual alternative (non-visual) way to describe the meaning of an image. Please provide a brief (under 100 characters) description of all images.

Alternative text provides several services:

Screen readers cannot analyze an image and determine what the image represents, instead the screen reader uses alternative text to convey the image to the user.
In cases where an image is not loaded into a web page, the alternate text is displayed instead. Some users choose not to display any images in the web browser and prefer to read the alternative text.
Search engines use alternative text to assist in search results.

Best Practices

The accepted practice for images varies depending on the use of the image. If an image is included in Canvas for educational purposes, a complete description of the image is required. Images that are charts and graphs are examples of images that require detailed explanation so that a sight impaired person can gain the knowledge. Another example would be an image for an Art History course.
If an image in Canvas is for aesthetics only and does not contribute to the content of the page then the image can be more generally described.
Avoid using "image of" or "picture of" within the alternate text because a screen reader will automatically say "image of" before reading the text.
For images that are also links, avoid using "click here" or "link to" in the alternative text because the screen reader will automatically say "link" before reading the description.

Good Usage Examples

1. Descriptive alternative text, not the file name.

A proper alt text image will include a description of the image:
<img alt="Ancient pre-historic cave art depicting a bison of the cave of Altamira.” src="https://miamioh..." />

The screenreader will read “Ancient pre-historic cave art depicting a bison of the cave of Altamira.” The description provided in this example provides knowledge to the sight impaired person who cannot see the image detail.

2. Aesthetic or Instructional Image?

If the image provides only visual flare to a page and has no instuctional value then a shorter, more general alternate text is acceptable:
“Raphael Fresco School of Athens.”

If the image is related to a course and has educational value then a more descriptive alternative text is required:
“The image is about philosophers in the Greek era. Its overhead tondo-label, “Causarum Cognitio,” tells us what kind of philosophy, as it appears to echo Aristotle’s emphasis on wisdom.”

It falls to the subject matter expert to determine the education purpose of the image.

Canvas Guidelines for Alternative Text

You may see the following errors or notifications regarding alternative text while creating content in Canvas:

No Alternative Text found (ALT text)

The alternative text of an image should not be empty, especially if the image provides meaningful information that supports the rest of the content on the page.

You can use the "U Fix It" tool in Canvas to add alternate text when it is missing.

Alternative Text should not be the image filename

When an image is included on a page in Canvas screen readers will read the link filename if the HTML alt attribute is empty or missing.

In this example, the screen reader will read “ancient4-14BD602AED664…,” which is not helpful to understand the meaning and function of the image.

Alternative Text is more than 100 characters

In some cases where the description cannot be presented succinctly (under 100 characters), a link and/or longdesc attribute that references a separate page that contains the longer description can be provided.

Or you can describe the image in the surrounding paragraphs, above or below the image.

Alt text for all img elements used as source anchors should not be empty

When the only content inside of a link <a> is an image, the alternative text should never be missing or empty. In these cases the alternative text should describe the image and the destination of the link. For example, if you have a portrait of George Washington that links to his Wikipedia article, the alternative text could say "Wikipedia entry for George Washington".