Adding Alt Text for Simple Images
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 briefly describe the content or function of the image.
- Avoid Redundancy: Don’t repeat information already provided in the surrounding text.
- Focus on Purpose: Think about why the image is included and what information is essential for the student to understand.
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 help to think about 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 get quick, useful 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,” simply 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 for Creating Alt Text`
Creating effective alt text can be streamlined with the help of digital tools. Here are two tools that can assist you in generating accurate and concise alt descriptions for your web content:
Wolverine Describer
Wolverine Describer is an AI-powered tool designed to help generate alt text for images, making it easier to ensure your content is accessible to all users. Please note that this tool is available only with a ChatGPT paid subscription. Here’s how to use it:
- Access the Tool: Visit Wolverine Describer and log in using your ChatGPT paid subscription account to upload the image you want to describe.
- Analyze the Image: The tool will automatically analyze the image’s content and suggest an alt text description.
- Review and Edit: Review the suggested alt text and make any necessary adjustments to ensure accuracy and relevance to your content.
- Implement on Your Site: Once you are satisfied with the description, copy and paste it into the alt tag area.
Tip: Use Wolverine Describer for various images to maintain accessibility across your website and ensure consistency in style and quality.
Google Lens
Google Lens can assist in generating alt text by identifying objects and extracting text within images. Google Lens is free to use. Here’s how to use Google Lens on a desktop:
- Access via Web Browser: Open Google Images in your web browser and search for the image you want to describe.
- Right-Click and Use Google Lens: Right-click the image and select “Search image with Google Lens” (this option may vary slightly depending on your browser and settings).
- Analyze the Image: Google Lens will open a side panel displaying information about the objects and elements within the image.
- Craft the Alt Text: Use the “Add to your search” field ” to write “describe this image.” Google AI will write a long description.
- Implement on Your Site: Make edits to the description including any verbiage that says “image of…” Once you are satisfied with the description, copy and paste it into the alt tag area.
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 Wolverine Describer 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
Example 1
- Non-descriptive: “Image of a cat.”
- Descriptive: “Orange tabby cat sleeping on a windowsill.”
Example 2
- Non-descriptive: “Picture of students.”
- Descriptive: “Three students studying together in the library.”
Tips for Faculty
- Decorative Images: If an image is purely decorative and doesn’t convey information relevant to the content, mark it as decorative. This way, screen readers will skip it, reducing noise for people.
- Context Matters: Describe the image in a way that adds value. Think about what you want students to learn or understand from the image.
What Can I Do Now?
Take immediate steps to enhance the accessibility of your content. Start by reviewing all images in your course materials, including lecture slides, assignments, readings, and any embedded multimedia content, to ensure they have meaningful alt text. Alt text should help students using screen readers understand the visual elements by being concise and conveying the essential purpose of each image without repeating information already presented in the surrounding text. For purely decorative images, mark them accordingly so they do not distract learners. When reviewing your course materials, use accessibility checkers, like the Canvas built-in tool, Microsoft Accessibility Checker, Google Accessibility Checker, Adobe Acrobat’s Accessibility tool, or third-party tools such as WAVE or Axe, to verify that all images have appropriate alt text and to identify any issues. By integrating these practices now, you can create a more inclusive learning environment where every student has equal access to the course content.