Adding Alt Text

Why Add Alt Text?

Alt text (alternative text or alt tags) provides a description of images for students who use screen readers or those who have visual impairments. It ensures that all learners can understand the content, even if they can’t see the image. Alt text is also helpful if an image fails to load, giving context to users about what the image represents.

What Makes Good Alt Text?

• Concise and Informative: Alt text should provide a brief description of the image’s content or function.
• Avoid Redundancy: Don’t repeat information already provided in the surrounding text.
• Focus on Purpose: Consider why the image is included and what information is essential for the student to grasp.

How to Create Effective Alt Text

Describe the Image’s Content

• Describe what is in the image and focus on its essential elements. It may be helpful to consider how you would describe it to a group of people during a presentation.
• Example: For an image of a bar chart showing student grades, use “Bar chart depicting average student grades by subject.”

Keep It Brief

• Alt text should be clear and succinct. This ensures that screen reader users receive quick and helpful descriptions.
• Example: Instead of “This is an image of a bar chart that shows the different grades students received in various subjects over the past semester,” use “Bar chart of student grades by subject.”

Avoid “Image of” or “Picture of”

• Screen readers already identify the content as an image, so there’s no need to add “image of” or “picture of.” Go straight to describing the key content.
• Example: Instead of “Image of a graduation cap,” use “Graduation cap representing student success.”

Tools and Prompts for Creating Alt Text

Creating accurate alt text is essential for making images accessible to people using screen readers. UM-Flint provides these recommended methods depending on your use case.

For Website Images: Auto-Generate Alternative Text Tool (Recommended)

For all alt text on Blogs, Intranet, UM-Flint Now, and the main website, use the Auto-Generate Alternative Text tool, which is built directly into WordPress by ITS. This tool is integrated into the media library and block editor, making it the fastest and most consistent way to create accessible image descriptions for university web content.

How to access: When you insert and select an image in the WordPress Media Library, you’ll now see an area on the right side panel titled “Auto-Generate Alternative Text.”

Clicking the “Generate” button prompts the system to analyze the image and generate descriptive alternative text, which will automatically appear in the Alt text field after a few seconds.

For Social Media & Other Digital Media: AI Prompt

For alt text needed outside of WordPress, such as social media posts, email graphics or other digital content, use the following prompt with any AI tool (ChatGPT, Google Gemini, U-M GPT, Claude, etc.). This prompt follows WCAG standards for accurate, context-appropriate alt text.

Copy and Paste This Prompt:

You are an accessibility assistant that generates accurate image alt text following these rules:
1. If the image contains text:
   - If decorative or repeated nearby → return an empty string.
   - If functional (e.g., icon) → describe its function.
   - If essential text only in image → include that text.
2. If the image is part of a link or button → describe the action or destination.
3. If the image contributes meaning:
   - If simple → briefly describe in ≤125 characters.
   - If complex (e.g., chart) → summarize essential data.
   - If redundant → return an empty string.
4. If purely decorative or unclear → return an empty string.
5. When the word "Twitter" appears in the image, replace it with "X" in the alt text. Output only the alt text as a plain string with no extra formatting.

How to Use

1. Copy the prompt above and paste it into your preferred AI tool.
2. Upload or attach your image.
3. The AI will return appropriate alt text based on the image content and context.

Tip: If the AI returns an empty string, the image is likely decorative and doesn’t require alt text (use alt=”” in your HTML or leave the alt text field empty).

---

Tip: Using Google Lens on a desktop allows you to easily access and analyze web images without switching devices, making it a convenient choice.

By utilizing tools like the Auto-Generate Alternative Text Tool, AI prompts and Google Lens, you can efficiently create alt text that enhances accessibility for all users, ensuring that your web content is inclusive and compliant with accessibility standards.

Examples of Descriptive vs. Non-descriptive Alt Text