Accessibility skills: Images and alternative text

What this means

Alternative text is a description of an image that is embedded within the code of that image and can be read to a user with a screen reader. (Please be reassured that you do not have to do any computer coding to add alternative text to your images!)

Why this matters

The primary purpose of alternative text (or “alt text”*) is to describe the image to anyone who cannot see it. Obviously, this benefits visually impaired users. It also benefits users who have disabled image loading or who have encountered a broken image.

*But not “alt tag.” The “alt” is an attribute of the image tag; it is not a separate tag.

General tips for writing alternative text

• Use the process of adding your alt text as an opportunity to make sure you're choosing images intentionally to complement your course materials. What message or information do you need to convey? Does this image serve its purpose?

• If the image is purely decorative, you can mark it as such. However, do not do this if your image serves an instructional purpose. Your document will pass an accessibility check, but it is not truly accessible. 

• Do not use the image file name as the alternative text. (This is the default alt text in Canvas; you will need to replace it).

• Keep alternative text concise. The Canvas accessibility checkers will flag alt text longer than 120 characters as an error. You do not have to adhere strictly to this limit, but check where you can cut excess verbiage out of your alt text.

• Omit “Photo of…” or “Picture of…” from your alt text. 

• If the image is adequately described in context or in a caption, or if the information is provided in an alternate format, you do not need to provide as much description in the alt text. This is especially important for complex images such as charts, infographics, and so forth.

• Use appropriate punctuation in your alt text, as this improves the experience for users with screen readers.

• Alt text should not be redundant (i.e., repeating information from the surrounding text), nor should it provide information that is not presented elsewhere in the context. For example, if you wish to include attribution with your image, place that in a caption, not in the alt text.

Accessible data visualization

Providing alternative text for complex images (such as graphs, diagrams, and infographics) can be especially challenging. The guiding principle, however, remains: What do students need to know about the image? 

Especially, consider how students will be assessed on the information presented in the image. For example, do they need to know the general trend of a graph, or do they need to know specific numbers? 

Additional guidelines for accessible data visualization include the following:

• State what type of graph is shown—is it a pie chart, a bar graph, or a scatter plot? 

• When appropriate, describe the x- and y-axes and what they represent. 

• Use short sentences that focus on data and descriptions that are brief and specific. Focus on details that are not included in the caption of the graph or the supporting text. 

• Unless interpreting the graph is a stated learning outcome, explain the conclusions or calculations students should draw from this, either in the alt text or supporting text or lecture.

• Spell out abbreviated units for clearer audio pronunciation in screen readers.

• Make sure the text is readable—not too small or blurry. 

• An accessible table presented alongside the complex image is often the best alternative presentation of the information. Definitely replace any screenshots of tables with accessible tables.

Accessible equations

See Accessibility Skills: Equations to learn how to ensure that your equations are accessible to anyone using assistive technology.

Using generative artificial intelligence to create alternative text

Should you outsource your alternative text writing to a chatbot? There is an option within Microsoft to generate alt text, but, as of this writing, this alt text is often too vague to be helpful and can even be inaccurate.

However, generative AI models such as ChatGPT 4.0, Microsoft Copilot, and Claude hold some promise for producing descriptive alternative text. Arizona State University even offers a free Image Accessibility Creator for this purpose. However, you must review any AI-generated text for accuracy and completeness. (Also note that ChatGPT 4.0 requires a subscription; the free version of ChatGPT does not support image uploads.)

Read How to use AI for better image accessibility to learn more.

Using images effectively and inclusively

The process of adding alternative text to your images should help you be more intentional about the images you select. Other considerations for selecting images for your course include the following:

• Do use images to break up large blocks of text on a page.

• Make sure your images have sufficient color contrast and are not blurry or pixelated. Do not use watermarked images; not only are these of poor quality, but they are also likely protected by copyright.

• If the detail in your images is important (e.g., the numbers in a graph or chart), make sure your image is large enough for students to see that detail and that this information is included in the alternative text and/or accompanying lecture.

• Avoid images that reinforce homogeneity or stereotypes. If you must present such an image for instructional purposes, be sure to describe the context of that image. It can be challenging to find images that don’t just depict conventionally attractive white models. The Noun Project is an excellent source for diverse images. Basic images (good enough for Canvas pages or slide decks) are free under a Creative Commons license. 

Reach out to Missouri Online experience design team if you need assistance selecting or creating inclusive images.

Apply this!

Learn how to add alternative text:

• Microsoft Word

• Microsoft PowerPoint

• Microsoft Excel

• Canvas

Learn more

• From the W3 Web Accessibility Initiative:

  • Images Tutorial

  • An alt Decision Tree

• Alternative Text. [Video] ADA National Network.

• Images. Deque University.

• Alternative Text. WebAIM.

• Authoring Meaningful Alternative Text. Section 508.gov.

• Alt Text. From DiPeri, Dawn Lee. Graphic Design for Course Creators. Pressbooks.

• Identity and Inclusion in Alt Text. University of Colorado Boulder Digital Accessibility Minute. April 2024.

Practice with alt text

• Introduction to Accessible Images and Practice Describing Images. Poet Diagram Center.

• Cooper Hewitt Guidelines for Image Description

• Case Study 9.7: Describe It!—A Crowdsourced Alt Text Description Project. Talea Anderson, Accessibility Case Studies for Scholarly Communication Librarians and Practitioners. Open Text WSU.

Alt text and accessibility for complex images

• Complex Images. W3 Web Accessibility Initiative.

• Making Graphical Data More Accessible. University of Nevada, Reno, Accessibility.