Alternative text (Alt Text) is a brief, written description of an image. It is read aloud by screen readers and displayed if an image fails to load. Without it, a screen reader will simply say “Image” or read a cryptic filename like “IMG_8472.jpg.”
The “Why”
- Visual Impairments: It allows students who are blind or have low vision to “see” the graphics, charts, and photos that are essential to your teaching.
- Low Bandwidth: If a student has a poor internet connection and images don’t load, the Alt Text appears in the box where the image should be, preserving the context.
- Searchability: Search engines use Alt Text to understand what is in an image, making your content easier to find and index.
Examples: Before vs. After
The “Informational” Image
- Bad: Alt text: “Photo.” or “Graph.”
- Good: Alt text: “Line graph showing a 20% increase in HCU student enrollment between 2020 and 2025.”
- The Difference: The “Good” version conveys the data and the intent of the image, rather than just identifying that an image exists.
The “Decorative” Image
- Bad: Alt text: “Blue swirl divider line.”
- Good: Marked as “Decorative” (or Alt text left blank/null).
- The Difference: Decorative items don’t add information. By marking them as decorative, you allow the screen reader to skip them entirely, saving the user time.
The “Functional” Image (Buttons)
- Bad: Alt text: “Magnifying glass icon.”
- Good: Alt text: “Search the Library Catalog.”
- The Difference: For icons that do something, the Alt Text should describe the action, not the physical appearance of the icon.
How-To: Strategies for Success
- Be Concise: Aim for the length of a tweet (125 characters or less). If an image is too complex for a short description, describe it in the surrounding text and use Alt Text to point to that description.
- Avoid “Image of” or “Photo of”: The screen reader already announces that it is an image. Jump straight to the description.
- Context is King: The same photo of a campus building might have different Alt Text in a History doc (“Founded in 1960…”) than in an Architecture doc (“Features Gothic arches…”).
- Don’t Repeat Yourself: If the caption directly under the photo already describes everything in the image, you can mark the image as decorative to avoid the screen reader reading the same info twice.
- Include Text in Images: If an image contains text (like an event flyer), that text must be included in the Alt Text or the body of the page.
- The “Eyes Closed” Test: If you read your Alt Text with your eyes closed, do you still understand the point the image was trying to make?
Apply This to Your Work
Ready to describe your visuals? See the specific technical steps for your preferred platform: