Alternative Text

Problem

Images that present information only through visuals are not accessible to people who are blind or have low vision.

How to Fix

Add alternative text to any images that conveys information or has a function. Make sure the text alternative serves the equivalent purpose as the non-text content. In other words, if you swapped the image with the text alternative, the person reading the text alternative would be able to receive the same information and perform the same image-related tasks as a person who is able to see the image.

  • Add an alt attribute to any images, image maps, or applets that convey information or have a function.
  • For decorative images, simply enter Decorative. A screen-reader will announce "image, decorative" and the user will understand the image does not relay any pertinent information.
  • For linked images, convey the destination of the link in the alt attribute.

Tips for Writing Effective Alternative Text

  • Keep the description succinct, try to use 150 characters or less.
  • Communicate the content and function of the image.
  • Take into account the surrounding context of the image.
  • Update the text alternative if an image changes over time.
  • Include any visual information that is conveyed solely by colour differences.

Advanced Tips

  • For non-text content meant to convey a specific sensory experience, provide a descriptive name or label for the sensory content.
  • For tests or exercises that would be invalid if presented in text, provide a descriptive name or label for the exercise.
  • For a group of adjacent images that present a single functionality (e.g a 5 star rating system), provide a text alternative on one item that serves the equivalent purpose for the entire group (e.g. "3 out of 5 stars"). For the other items, implement them so they can be ignored by assistive technology. (See General Technique 196)
  • If you do use CAPTCHA, you must provide one that is keyboard accessible and can accommodate different types of sensory perception. You must also provide a text alternative that identifies the CAPTCHA and describes its purpose. 

Things to Avoid

  • Do not put the words “image of...” or "graphic of..." at the start of the alt text.
  • Do not use the filename as the text alternative, such as “Oct.jpg”.
  • Do not repeat the same information contained in an adjacent caption or surrounding text.
  • Do not use the CSS background-image property to include images that convey important information.

External Resources

  1. Understanding Success Criterion 1.1.1 Non-Text Content (Level A)
  2. WAI Web Accessibility Tutorial on Images
  3. WebAIM Guide to Alternative Text