Accessible Images

• U of A
• Accessibility
• Technology
• Developing Accessible Websites
• Accessible Images

If web pages include images, the content of those images is, by default, inaccessible to people who are unable to see the images. Whether and how to address this issue depends on the purpose of the image within the context of the web page.

Simple Informative Images

If images are designed to communicate information to the user, they must be described. If they are complex images with a lot of important detail (e.g., graph, chart, diagram) see the next section on Complex Informative Images. In contrast, if images are simple (e.g., logos, buttons, photographs) a short description should be added to the alt attribute of the <img> element. The description should describe the content of the image as succinctly as possible. The goal is to provide access to the content of the image, without burdening the user with superfluous details.

Additional information is available on WebFirst, Alt text and Captions | Best Practices.

Complex Informative Images

If images contain a lot of important detail (e.g., graph, chart, diagram) these should include a short title or summary in the alt attribute, but a long description that includes more detail should also be provided. A long description can include any HTML necessary to communicate the content of the image, including data tables.

Historically, the long description has been provided on a separate web page. In HTML5, it is now valid to include a long description on the current page. The longdesc attribute is added to the <img> element, has a URL as its value, pointing to the location of the description. The URL can point to a separate page, or to the id of a container on the current page.  If added to the current page, it is ok to hide the description using CSS display:none.

Screen readers and supporting browsers will inform the user that a long description is available, and the user can choose whether they want to read that description.

Decorative Images

If images are used solely for decorative purposes, they should be added to the page using CSS, not with the HTML <img> element. If for some reason an image needs to be added using HTML, the <img> element must have an empty alt attribute (alt=””). This is a standard technique for communicating to screen readers that the image should be ignored.