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 Type | Weak Alt Text | Excellent Alt Text |
|---|---|---|
| Lab / Classroom Photo | Instructor | A Pima Community College instructor demonstrating how to navigate D2L Brightspace in a classroom. |
| Data Graph | Graph of sales | Line graph showing monthly course enrollments peaking in August at 1,200 students. |
| Pie Chart | Chart of students attendance modality | Pie 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
Ferris wheel image used from Unsplash by hannahmorgan7

0 Comments
Add your comment