This is an in-progress, unapproved draft. Please send any suggestions, edits, or comments to the publicly-archived list: email@example.com.
[DRAFT] Image concepts
Every image needs to have a text alternative - text that provides an equivalent alternative to the image, by describing the information or function represented. The reason for this is explained below. The following tutorial pages show you how to choose appropriate text alternatives once the purpose of the image has been carefully considered:
- Informative images: Used to graphically illustrate concepts and information, typically pictures and illustrations. The text alternative needs to be at least a short description conveying the essential information presented by the image;
- Decorative images: Used to add visual interest to the page, rather than to convey information that is important to understanding the text. The text alternative should be null (alt="");
- Functional images: Used alone as a link or button to activate a function - for example, icons for printing and submitting forms. The text alternative needs to describe the function rather than the image;
- Images of text: Representations of readable text, sometimes used when special fonts are wanted. This practice is discouraged except for logos, however if used, the text alternative needs to contain the same words as shown in the image;
- Complex images (such as graphs and diagrams): Where an image conveys data or detailed information. The alternative needs to be a full text equivalent of the data and information represented in the image;
- Groups of images: When a collection of images is used to convey a single piece of information, the text alternative for one item should convey the information conveyed by the entire group;
- Image maps: When one image is used to contain multiple clickable areas, the text alternative for the image as a whole should provide an overall context for the links, while text alternatives for the clickable areas need to describe the purpose or destination of the links.
Why is this important?
Images are used extensively on websites and can create major barriers when they are not made accessible. Accessible images are beneficial in many situations such as for:
- People using screen readers: The text alternative can be read aloud or rendered as Braille;
- People using speech input software: Users can put the focus onto a button or linked image with a single voice command;
- People browsing speech-enabled websites: The text alternative can be read aloud;
- Mobile web users: Images can be turned off, especially for data-roaming;
- Search engine optimization: Images become indexable to search engines.
Note: Images are essential for communicating information, illustration, and for decoration. They are critical for many website users, including people who enlarge their screen by zooming and use the images as cues for orientation, and people with some forms of learning disabilities for whom images, such as illustrations, make the text easier to read and understand. Removing images from websites (so called "text-only versions") make websites less accessible for these users.
How to make images accessible
Accessible images provide the same information in text as that represented visually. These text alternatives serve the equivalent purpose of the images so that they can be used instead of the images, for example to present the information in other ways such as large print, Braille, speech, symbols, and simpler language. The text alternative will vary depending on the type of image, its purpose, and its surrounding context. In HTML, text alternatives for images are provided through the alt attribute of the corresponding <img> element. Good web authoring tools and content management systems (CMS) provide functions to insert text alternatives along with the images without having to manually edit the code. Other formats available on the Web such as ODF, PDF, and Word have similar mechanisms to provide text alternatives from within the editors.
Relationship to WCAG 2.0
Image accessibility is required by the following WCAG 2.0 Success Criteria:
- 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose ... (Level A).
More background in Understanding SC 1.1.1;
- 1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except ... (where they are) ... Customizable or Essential. (Level AA)
More background in Understanding SC 1.4.5.