Accessible images
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 the AccessComputing 30 Tips for Web Accessibility site, Tip #1: Add proper alt text to images.
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.
