Accessibility: Alternative Text in Canvas

Adding images to Canvas is a simple and powerful way to illustrate complex ideas and expand meaning. When we provide images that convey meaning, it’s important that we provide equivalent text-based alternatives. Luckily, adding alt text descriptions easy in Canvas.

Rich Content Editor

Embed images with alt text wherever you find the Rich Content Editor in Canvas:

  • Announcements
  • Assignments
  • Discussions
  • Pages
  • Quizzes
  • Syllabus

Upload images

  1. Start by selecting the “Embed Image” icon in the Rich Content Editor.
    A new dialogue will open titled “Insert/Edit Image.
    Canvas rich text editor Embed Image button
  2. Under the “Image Source” heading, select the “Canvas” tab.

  3. Select an available folder as the location where you’d like to store the file.

  4. Select the “Upload File” button, browse to the image file on your computer’s hard drive, then open it to attach it.
    After a moment, a notification will appear that reads “Success: File uploaded.”

  5. Before clicking the “Update” button at the bottom of the dialogue, replace the Alt text description to accurately reflect the information in the image.
    Insert/Edit Image dialogue with options to upload files and input alt text description.

Add Alt Text

  1. Under the “Attributes” heading, select the “Alt text” input field.
  2. Update the information in the field to accurately describe the information in the image.

    Important: the “Alt text” field may automatically contain the name of the file. However, the file name is not sufficient alt text because it cannot convey meaning and context to blind and low-vision people who use assistive technology like JAWS screen reader.

  3. Select the “Update” button in the bottom of the “Insert/Edit Image” Dialogue.

HTML Editor

Alternatively, toggle the HTML Editor button above the Rich Content Editor to create or edit alt text attributes directly in the editor. Input alt text in between the double quotation marks of the alt attribute. Example: alt=“your description here”

HTML Editor Rich Content Editor

<img src="/courses/21436/files/
alt="Rice University logo" width="400" height="70" />

<img src="/courses/21436/files/
1521580/preview" alt="Three baby screech owls sitting on a tree branch with vibrant green leaves"
width="400" height="150" />

Canvas rich text editor with embedded images of Rice logo and owls.

Additional Resources

Keywords:accessibility, a11y, canvas, alt text, alternative text, image descriptions, WCAG, UDL,   Doc ID:93820
Owner:John W.Group:Rice University
Created:2019-08-13 09:56 CDTUpdated:2019-08-13 11:11 CDT
Sites:Rice University
Feedback:  0   0