Image Alt Text A: Basic Images & Charts

Overview

Alt text (short for alternative text) is descriptive text added to images in digital content (like websites, documents, or learning platforms). It serves several important purposes:

• A written description of the image’s content, purpose, or function.

• Read aloud by screen readers for people who are blind or visually impaired.

• Displayed in place of the image if it doesn’t load.

• Describes an image for users who can’t see it — including people using screen readers, people with low vision, and users on slow connections. It ensures everyone can understand the image’s content or purpose.

✅Checklist for Image Alt Text

1. Is not the file name

2. Describes the essential content or function of the image

3. Is brief and clear (under ~125 characters for most images)

4. Matches the context and purpose of the image (A photo in a biology course might be “Leaf cross-section showing veins and stomata,” while the same photo in a design course could be “textured green maple leaf with gray shadow.”)

5. Avoids redundant phrases like “image of” or “picture of” (screen readers already announce it’s an image)

6. Is skipped entirely if the image is purely decorative

7. Includes relevant data if the image is informational (e.g., chart) 

Alt text examples for image above:

✅  A man and a woman sitting next to each other at a table laughing.

❌ A man and a woman.
→ Not enough detail

❌ Picture of a woman in a mustard sweater with a cup of coffee in front of her next to a man with a beard and wearing a blue shirt in front of a laptop. There is a corkboard and a bookshelf in the background and daylight seen through an outside window.
→ Too long (256 characters) with unnecessary details

Mark Images as Decorative if…

• It’s just borders, patterns, stock visuals with no context

• It doesn’t contribute to understanding the content

• It repeats information already given in nearby text

✅ Checklist for Alt Text and Basic Charts

• Include type (chart, pie, etc) title, dates

• Consider adding an (accessible) data table version below the image. This lets users access raw data directly.

• Summarize the key insight (s)

Sample Alt Text for image above

The bar chart compares 2024 first-quarter sales in North America ($1.2M), Europe ($950K), and Asia ($1.5M). Asia leads with the highest revenue, showing a 25% increase over the previous quarter. Sales increased in all regions, with Asia showing the most growth. 

See the page "Alt Text B: Complex Images" for information about making those resources accessible.

Site Scanning Tools: UDOIT & Ally Course Accessibility Report

About: Entire site scans are great for a comprehensive look at all the issues on your site and track your improvements through the scores generated. One recommended strategy is to choose one of the accessibility core areas and use the tools' filters to target a selected one of them at a time. These tool are accessed by clicking the link on your course navigation menu. If not present, this article will show you how to enable: Manage Course Navigation Links.

Selected Content Scanning in Canvas Edit Mode: Ally, Canvas, and DesignPLUS Accessibility Checkers

About: These three tools to do scans, not of an entire course, but on individual items of Canvas content such a page, assignment description, announcement, etc. They can be accessed anytime you are in Canvas Edit mode. Many users find these tools useful for quick clean ups of selected content and in tandem with site scanning tools. Making a habit of using these to check and fix content every time you're working in Canvas will go a long way in the ultimate goal of creating content that's accessible for all from the start! 

1: Ally Accessibility Checker

WebPage:(Vendor) Ally WYSIWYG Accessibility

2: Canvas Accessibility Checker

Video (2:25, Pope Tech) Canvas's built-in Accessibility Checker demo *Includes great demo of fixing color contrast.

Webpages:
(Vendor): How do I use the Accessibility Checker in the Rich Content Editor?
(UW IT) Overview: Accessibility tools in Canvas *Page has a section on this as well as other tools for accessibility in Canvas.

Fixing Manually 

Option 1: Visually scan all Canvas content with images. Click the Ally Score Icon to bring up the window where you can add/edit alt text. 

Option 2: Click your course Files tab. Do a search for "jpg" and then "png." Canvas will populate a list of all those file types. Use the Ally icons in the Accessibility columns to add/edit alt text. *While there, delete any unpublished or unused files!