Build Better Images and Graphics

• When patrons using screen readers encounter an image, chart, or other data visualization on a webpage, they will hear the description of the visual read aloud. This description is added to the item by the content creator and is known as alternative text or "alt text".
  • The interaction varies by assistive technology. For instance, someone using a Braille reader would feel the title announced in the reader.
• If this alternative text is missing, the images' content and meaning can become invisible to screen readers.

• Include information related to the image’s content, function, and intent. What information is conveyed through the image that is important for people to know?
• There are varying schools of thought about what makes alt text useful. Some users want the bare minimum of information, while others want more description to help them connect the visual content to the other material on the page. Generally though, try to keep descriptions brief. If this is not possible, consider including more explanation in your text rather than solely in the alt text, that way all visitors can learn more about the image.
• Skip introductory phrases such as "image of...." as the screen reader will announce it is an image by default.
  • However, noting the type of image can be helpful, such as “an oil painting of…”
• Use appropriate punctuation in alt-text and avoid special characters such as ampersands (&) as are frequently misread by screen readers.
• Some content management systems allow for image captions. If the caption and alt text would be exactly the same, a caption alone would suffice. However, ideally you describe the image itself in the alternative text and use the captions for adding additional context or meaning for the image.
• When copy/pasting images from another source, manually double check that the pasted image has alt-text. Alt-text is frequently not copied when images are copied. 

Alt text is not needed when...

• Graphics are purely decorative.
  • In these cases we still need an alt tag, but it would be empty or “null”:
    <img src="/images/decorative.jpg" alt="" />
  • Null tags convey the designer is purposefully stating the image is decorative.
• Alt text would be repetitive information.
  • For example, the alt text for a book cover might be its title. If the image is next to a catalog link that also features the title, the alt text becomes redundant.

1. Activate the WAVE tool and click on the "Details" tab.
2. Look through the Error, Alert, and Feature categories and review all alternative text comments. Click on the icons with each message to bring up the relevant image on your website.
3. Use the messages to double check that all your images have appropriate alt text. The alternative text will be listed with each image.

In the series of screenshots below, the Details tab mentions an image with a "Null or empty alternative text" (left). However, looking at the actual image (center), we can see it is not a decorative image and thus should have alternative text. We should enter that information and test again to see the new alt text highlighted (right).

How to enter alternative text in popular library content management systems.

Alternative text can become challenging for complicated images such as comics or data visualizations. For additional help, please consult the links below.

• WebAIM Alternative Text Guide
• Image ALT Text Tips from Penn State: Gives helpful examples of Alt Text descriptions for different situations.
• The Diagram Center Image Description Guide: Fabulous website for learning to describe advanced graphics such as comics or data visualizations. (Providing archive version as original site link has an expired security certificate.).
• AI alt-text and image description generator: Free open-source tool from Arizona State University that generates both alt text and detailed descriptions using ChatGPT.
  • Important: Always double-check AI created alt-text as it can frequently miss the context of an image or misinterpret elements of the photo.