Alt Text (Images) - WCAG

What is Alt Text & Why Does it Matter?

Alt text (alternative text) is a written description of an image that allows screen readers to convey its meaning to users who cannot see it. Images without alt text are essentially invisible to people using screen readers. By adding alt text, you ensure that everyone can access and understand the purpose of an image.

Alt text also supports:

Blind and low vision users
Situations where images fail to load
Mobile or low-bandwidth access

It’s a small step that makes a big impact on accessibility and inclusion.

What Should Alt Text Do:

Alt text should clearly communicate:

What the Image Shows
Why the image matters in context
It should be brief, clear and purposeful (150 words max)

Two helpful guiding questions: What would someone miss if they couldn’t see this image? or Ask, what is the purpose of this image?

The goal is not to describe every detail, but to convey the essential meaning or purpose of the image within the content.

How Should You Write Alt Text (Best Practices):

Keep it brief, clear, and purposeful. Focus on relevant details, not everything in the image. Write naturally, as if explaining to someone who can’t see it. Avoid phrases like “image of” or “picture of” (screen readers already announce this)

Examples:

“A laptop on a white surface with a hand on the trackpad, next to a straw hat and purple flowers.”
“Overhead view of a workspace with a laptop, hand on the trackpad, purple flowers, and a straw hat on a white surface.”
“Hand using a laptop trackpad on a desk with purple flowers and a straw hat nearby.”

For Decorative Images:

If the image does not add meaning, mark it as decorative so screen readers skip it
This reduces unnecessary noise and improves the user experience

Add Useful Text Alternatives for Images and Visuals

When you use images, icons, charts, or other visuals, ask: “What is the purpose of this?” Then reflect that purpose in the text alternative.

Best practices:

Write concise alt text for meaningful images, focusing on what learners need to know rather than every visual detail.
- Example:
  - Instead of “Photo of a bar graph,” use “Bar graph showing a 20% increase in reading scores from fall to spring.”
Provide longer descriptions for complex visuals, such as diagrams, infographics, or organizational charts. Pair short alt text with a longer description in the body text, a caption, or a linked document.
- Examples:
  - Alt text: “MCIU human resources organizational chart.”
  - Description: A short paragraph explaining the hierarchy and relationships.
Start by updating images in your most-used slide deck or LMS module. Even a few high-impact visuals with clear alternatives make a difference.

The Complex Description for the Alt TExt INfographic

This infographic is divided into three main sections:

The Fundamentals

Closing the "Invisible" Gap: Images without text alternatives are invisible to screen readers, preventing users from grasping full meaning.
The Core Purpose: Effective alt text explains what the image shows and why it matters in context.
Keep it Brief (150 Word Max): Descriptions should be clear and purposeful; standard practice limits alt text to 150 words to avoid information overload.

Best Practices in Action

Prioritize Meaning Over Titles: Instead of generic labels like "Photo of a bar graph," use descriptive text such as "Bar graph showing a 20% increase in reading scores."
Strategy for Complex Visuals: Use a short title for alt text and provide a detailed explanation in the body text, captions, or a linked document.
Complex Visual Sample: For an organizational chart, use alt text like "HR Org Chart" paired with a description of the hierarchy and relationships.

Getting Started

Focus on High-Impact Visuals: Start by updating images in frequently used slide decks or Learning Management System (LMS) modules.
Small Changes, Big Difference: Adding clear alternatives to key visuals significantly improves the experience for individuals with visual impairments.

How can I easily determine what my Alt Text Should Be?

Open the Gemini Alt Text Gem
Upload your Google Doc, or Google Slideshow to the Gemini Gem.
Prompt the gem to provide you with Alt text for any images in your resource.
Review the AI Generated alt text to ensure that it is correct.
Copy the alt text, (highlight text, control C)
Right click on the image, select Alt Text, and paste your alt text control v.

In Canva- Write Click on an image and select Suggest for Me (AI will generate alt text)

Page updated

Report abuse