10.4 Image Accessibility

Images must include descriptive alt tags. If the descriptive text is too long for the tag, consider using a Word document to provide the description. Images should be sized appropriately for full viewing.

Points: 3 (Essential)

QM Alignment: 8.4

Overview

Alt text allows a screen reader to describe an image. This text should accurately and succinctly convey the meaning of the image. Images that are purely decorative should be marked as so, in order that screen readers can skip over them.

Accessible Images

• Provide descriptive alt text for images, charts, graphs, or diagrams.
• Select simple images to communicate concepts.
• Ensure Color Contrast does not impact the information found on the image.
• Goal: Provide alt text for all non-text materials.

Tips

• The Canvas Accessibility Checker and Blackboard Ally will check your images for accessibility issues.
• Check that all images have proper alt text and color contrast
• If an image has no semantic meaning – it can be safely ignored by screen readers, then mark the image as decorative
• Keep image files small (ideally under 100kb). Use a photo editor to resize
• Complex figures should have rich descriptions and be usable in black and white

Frequently Asked Questions

• How do I describe an image? When can I mark it as decorative?
  • Any text in the image should be in the alt text or else described below the image. Describe what is happening in the image so that someone can understand what the image is conveying. See How to write effective alt text.
  • If the contents of the page can be understood without seeing the image, it can be marked as purely decorative, which causes screen readers (like NVDA) to skip over it.

Common Issues

Via Avoid these common alt-text mistakes:

• Automatically generated alt text that has not been edited – the alt text should not be the file name
• Using alt text for decorative images
• Marking all or many images as decorative, which should not be
• Alt text that misses important information
• Alt text that’s not descriptive enough
• Alt text that’s overly descriptive
• Do not include ‘image of’, ‘picture of’, ‘graphic of’ at the start of every alt-text description
• Avoid unnecessary detail about colors and appearance
• Be succinct and specific
• Alt-text that focuses on irrelevant information

Resources

• Accessible Images
• Writing effective alt text
  • An alt Decision Tree
  • Avoid these common alt-text mistakes
  • Accessible Is Possible: All about Alt Text
• Complex images
  • Complex figures should have rich descriptions and be usable in black and white
  • Accessible Content in Chemistry
  • Approaching Accessibility in Chemistry & Math From All Sides
  • How to write alt text for digital comics
• Emojis and Accessibility: The Dos and Don’ts of Including Emojis in Texts and Emails
• Canvas Accessibility Checklist
• Canvas Accessibility Checker
• Blackboard Ally