Using Alternative Text in Course Images

Written by Yiting Wu
March 1, 2023 • 3 minute read

Alternative text, or alt text, refers to the text equivalents of images in context. Screen reader users will hear image descriptions, and alt text may be displayed in place of unavailable images to ensure all visitors can see the image's necessary context. Finally, some search engines use alt text and factor it into their assessment of the page's purpose and content.

According to WebAIM, alternative text serves three functions:

  • Screen readers announce alternative text in place of images, helping users with visual or certain cognitive disabilities perceive the content and function of the images.
  • If an image fails to load or the user has blocked images, the browser will present the alternative text visually in place of the image.
  • Search engines use alternative text and factor it into their assessment of the page purpose and content.

(From Alternative Text, WebAIM)

According to the WCAG 2.0 Guideline 1.1.1 (2018), “All non-text content that is presented to the user has a text alternative that serves the equivalent purpose”. 

In most content management systems (CMS, such as WordPress or Drupal), click on an image in the body of a blog post produces an image optimization or rich text module where alt text can be added.

Consider the following best practices when adding images and non-text objects to your online courses on Canvas:

Adding Images

Some images may be strictly decorative to fill blank space on a webpage. In other cases, you may use images to provide examples, illustrate key teaching points, and support visual learners in your course. These images must be accompanied by explanatory aids like alt text to ensure full accessibility by students.

If your image contains text, a screen reader will not read the text unless it is copied into the alt text. 

Adding Graphs

Alt text is generally insufficient for describing charts and graphs, which visually present trends in a data set. You may use alt text to reference that a chart is present in a page's body and denote that a summary of trends will follow.

Adding Maps and Diagrams

Similarly, maps and complex diagrams require more than alt text to be accessible. Reference the map or diagram in the alt text and denote that a longer description will follow. Add the contextual description as a part of a page's body to provide additional clarity, whether a student is using a screenreader or prefers an alternative means of representation as a UDL best practice.

Resources from Penn State IT Accessibility Group

Are you or someone you know finding success incorporating Universal Design principles and enhancing accessibility in your course? If so, we’d love to hear from you! Email instructionaldesign@usfca.edu to share your story.

There are various educational technologies that can help you ensure accessibility in your Canvas courses. Blackboard Ally is integrated with Canvas to automatically check course materials against WCAG 2.0 accessibility standards, providing guidance and tips for remediation. Learn more about Ally on the ETS website.

Whether you don’t know where to start or have a particular educational technology in mind, we are here to help! To learn how to apply educational technologies to your course, request an Instructional Design consultation.

Contact Instructional Technology & Training to schedule a training session and access self-guided training materials.

Request Instructional Design Workshops
Our Instructional Designers offer a two-hour workshop (in person or via Zoom) on UDL and digital accessibility. Learn more about the foundations of UDL and how to tailor course content towards providing digital access to all students.

For more information, email the Instructional Design team.