Making Images Accessible
WCAG 2.0 Guideline 1.1.1—"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."
Images are essentially inaccessible to people who are unable to view them. So, we provide Alternative Text when needed. This issue is addressed based on the purpose and complexity of the images.
When used should provide a text equivalent of the image. In other words, the tag should include the same meaningful information that other users obtain by looking at the image. It’s important to not only provide an ALT tag, but also provide one that is useful in the context of the document. You may not need to include every artistic detail, and you may be able to skip over purely decorative images, but those that contain critical information need to have it to spelled out in the ALT text.
Provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
Example 1: A dividing border, for example, would also have a null alt text alt="".
Example 2: Decorative Images as part of text link. The image below would have alt="" because it is only decorative and included as part of the link.
Informative images convey simple information which can be relayed with a short phrase or sentence. The alt text should explain the meaning or content of the image which does not have to be a literal description.
- photograph, icon, or logo
- Examples of Informative Images
Images that Convey Complex Information
Complex images may contain too much and/or too complex information to be described using alt text. In those cases, the image must be described using a long description. A long description will provide the same access to the information that is displayed in the image.
- Graphs, charts, or diagrams
- How to effectively describe complex images: The National Center for Accessible Media (NCAM) has developed guidelines for describing complex images, plus a variety of examples. These are available in their Effective Practices for Description of Science Content within Digital Talking Books.
- Examples of Complex Images
- In HTML, long descriptions can be added either on a separate web page or on the same page in a <div> with an id attribute. The HTML would need to be modified with the link to the long desc.
<img src="budget1.png" alt="Table 1. Percentages of images with alt text" longdesc="/page/1997">
- WCAG 2.0 Success Criterion 1.1.1 Non-text Content (Level A)
- W3.org Accessibility Tutorials - Image Concepts