Images not only provide visual appeal to our pages, 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 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 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--some times 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.
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.
NOT use 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.
NOT contain file extensions such as .jpg or .png
How to Add Alt Text to an Image
If Image Already Exists on Page
To add alt text to an image, select the embedded image tool located in the 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.
Alt Text Rules for 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 tool bar:
The Insert/Edit Image dialog box will open:
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.
Alt Text Rules for Images That Contain Words
In general, if the image contains words, the alt text should also convey those words. For instance, the alt text for an image that introduces a new unit should include the exact words used in the image. The alt text for the image below might be: Welcome! Getting Started - Introduction to Teaching with Canvas.
Alt Text Rules for Images With Complex Graphs or Charts
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.
Take, for instance, the chart below. In this case, the alt text for this image identifies the image and explains where the long description of the chart can be found. The long description is in a separate page, and the link to the page is directly below the image. If you are going to take your user to another page for the long description, be sure you include a link on that page to return to the module.
The alt text for this image is: Reasons for Inaccessibility Chart, described in the link Reasons for Inaccessibility Description