Topics Map > Research Computing
Topics Map > Do-IT Yourself > Teaching and Learning
Topics Map > Do-IT Yourself > Course Management > Canvas

Canvas Accessibility: Alternative Text

Adding images to Canvas is a simple and powerful way to illustrate complex ideas and expand meaning. When we use images that convey information, it’s important that we provide concise, equivalent text-based alternatives. Adding alt text descriptions is 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.
  2. A new dialogue will open titled Insert/Edit Image.
    Canvas rich text editor Embed Image button
  3. Under the Image Source heading, select the Canvas tab.

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

  5. 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.

  6. 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/
1521558/preview"
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:2020-09-15 15:53 CDT
Sites:Rice University
Feedback:  0   0