Pima Tech Guides

Accessibility Best Practices: Crafting Excellent Alt Text

Updated on

This guide outlines core principles and best practices for writing effective alternative text (alt text) for images, diagrams, charts, & graphs.

Purpose of Alt Text

Alternative text (alt text) serves as a textual replacement for visual content. Screen readers read alt text out loud to visually impaired students, and it displays on-screen if an image fails to load.

Alt Text Tips

Use the following tips as you create alt text for your images:

  • Image alt text should include any information the image portrays that is important to understand the function of the image. Ask yourself: "What critical information does this visual provide to a student who cannot see it?"
  • Keep alt text as simple as possible while still providing enough information for a user to navigate your content.
  • If your image shows how to complete a step, include directional alt text. This alt text includes information on how to find buttons, drop-down menus, or options in a list of text shown in the image. Example: Select Tools, the sixth option in the D2L navbar, and then Assignments, the fourth option in the drop-down menu.
  • You do not need to include the word "image" at the beginning of your alt text, as a screen reader will already provide that information.
  • If an image is purely aesthetic (e.g., decorative borders, abstract background swirls, or generic stock art that adds no learning value) mark it as decorative so screen readers safely skip it.

Quick Reference Table (Good vs. Bad Examples)

Image TypeWeak Alt Text Excellent Alt Text
Lab / Classroom PhotoInstructorA Pima Community College instructor demonstrating how to navigate D2L Brightspace in a classroom.
Data GraphGraph of salesLine graph showing monthly course enrollments peaking in August at 1,200 students.
Pie ChartChart of students attendance modalityPie chart showing 50% of students attend both in-person & online, 25% fully online, and 25% fully in-person. 

ASU Image Accessibility Creator

For assistance in creating alt text, check out the free image alt text generator created by ASU.

Alt Text Example

The following flashcard uses an image of a Ferris wheel to ask the question, "What color scheme does this image of a Ferris wheel show?" Because the color of the image plays a vital role in completing the task, the alt text must include sufficient information about the colors.

The alt text should read similar to: White Ferris wheel with red, orange, yellow, and seafoam green carriages against a white/light blue sky

Example digital (H5P) flashcard.

Ferris wheel image used from Unsplash by hannahmorgan7

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Guide Accessible Design: Accessibility Checklist
Next Guide Accessibility Best Practices: Creating Color Contrast
Want Help From A Human? → Contact Us