Add a rich description to images and graphs to improve comprehension
Images can be a great way to engage your learners with different modes of learning, and can help communicate complex ideas to students. For students with visual impairments, image descriptions that explain the content of an image are crucial for their learning. For all students, text descriptions can provide deeper context to aid their comprehension.
Image descriptions are often called "alternative descriptions", "alternative text", and "alt text". This is because they provide a text based, descriptive alternative to the image.
Ally checks for image descriptions anywhere there is an image. This includes image files and files that include images. For example, a document or presentation.
Select the Accessibility score indicator to open the instructor feedback panel. Follow the guided steps to add descriptions to your images.
See where this issue is
The preview highlights where specific accessibility issues can be found in the document. Highlights show every occurrence of one issue type at a time. For example, if your images are missing alternative descriptions, the highlights show you every place this specific issue occurs. If your document also has poor text contrast, select that issue in the feedback panel to see the occurrences of that issue highlighted.
Highlights are provided for these issues:
- Images without an appropriate alternative description
- Text fragments with insufficient contrast
- Tables without table headers
All other accessibility issues are not highlighted in the preview.
Missing text description
Use the tools above the preview to explore the issues in your document.
- Move through the document preview page by page.
- See how many times a specific issue appears in the document.
- Jump between the issue highlights.
- Hide or show the highlights.
- Zoom the preview content in or out.
- Download the original file.
Add descriptions to an image file
When you’re ready, add your image description to the text field in the instructor feedback panel and select Add.
Make sure your description is more than just the title of the file, or Ally will report an accessibility error. Describe the image and what’s important. Mention any text in the image to improve your score. To learn more, see Writing good descriptions.
Mark an image file as decorative
If your image is only for visual effects, and doesn't contain information relevant to the learning content, select Indicate image is decorative.
Alternative descriptions aren't necessary for decorative images. Your accessibility score improves. This helps assure students of the purpose of those files.
Add descriptions to images in other files
Sharing presentations and documents with students can provide them useful review and study materials. Since many files include images, it is important that the images contain an alternative description, to help both in labeling document images as well as for students with visual impairments.
If your presentation or document has images missing alternative descriptions, you need to fix it in your presentation or document software. Upload the new file to Ally when you’re ready. Select How to add descriptions for step-by-step guidance on how to do this.
Not sure how to write effective alternative descriptions? Make sure your description is more than just the title of the file, or Ally will report an accessibility error. Describe the image and what’s important. Mention any text in the image to improve your score. To learn more, see Writing good descriptions.
- Select How to add descriptions and follow the instructions.
- Open the file on your computer.
If you don't have a copy of the file on your computer, leave the instructor feedback panel and download the file from the course.
- Add descriptions to your images.
- Microsoft® Office: Double or right-click on an image to open the Format Picture panel. Select Size & Properties and Alt Text. Add the description text. Don't worry about the title.
- LibreOffice: Select an image. Select Format from the menu bar and select Description. Add the description text.
- Save the file.
- Upload the updated file to your course.
If you still have the instructions open in the instructor feedback panel, select Next and Browse to upload your file. If you don't have the instructor feedback panel open, select the Accessibility score indicator next to the file in your course and select Browse to upload your file.
Follow these best practices to write good alternative text descriptions for your images:
- Describe the image based on the page context. Convey the full meaning of the image.
- Avoid saying "image of" or "picture of". Screen readers automatically announce images as images.
- Be concise.
- Write narratives for complex images like infographics. Put this narrative on the page immediately following the infographic. Include an anchor link at the top of the page to view the text alternative. See an example of an infographic with a text alternative.
- Avoid images of text. If you can't avoid it, copy the text into the alternative description.
- Say something new. Don't repeat alternative descriptions on the same page. Don't repeat what is already said on the page.
- Identify images that don't represent relevant content as decorative.
What is a decorative image?
An image is decorative when it doesn't add to the information on the page. For example, art work used to separate topics or a photo of someone on the phone when discussing communication skills.
They are valuable in their visual appeal but may not need to be read by screen readers.
Why are alternative image descriptions important?
There are many reasons to use alternative descriptions with your images.
- Alternative descriptions, or text, are in the WCAG 2.1 guidelines
- Students can search for an image
- Students with visual impairments have difficulty perceiving images
- Student with a poor network connection may have difficulty perceiving images
- Screen readers can't read images
- Some students learn better from descriptions than images
- Text scales better than most images when the screen or page is enlarged