Navigation

Images

All tutorials

[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. This tutorial shows you how to choose appropriate text alternatives. It includes the following pages:

Functional images: Used alone as a link or button to activate a function, typically 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, typically used when special fonts are wanted - the text alternative needs to contain the same words as shown in the image;

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;

Complex images (such as graphs and diagrams): Used to convey data and detailed information - the alternative needs to be a full text equivalent of the data and information represented in the image;

Groups of images: Where a collection of images is used to convey a single piece of information - the text alternative for one item is used to convey the information conveyed by the entire group;

Image maps: Where 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;

Decorative images: Used purely for decorative purposes and do not convey any unique information - the text alternative needs to be null (alt="");

Why is this important?

Images are used extensively on websites thus they 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 and websites using software that reads web pages aloud: The text alternative can be read aloud;

People using speech input software: Users can put the focus onto a button or linked image with a single voice command;

How to make images accessible

Accessible images provide the same information in text as what is represented visually. These text alternatives serve the equivalent purpose of the image 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.

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.

Relationship to WCAG 2.0

Accessible images are required by the following WCAG 2.0 Success Criterion: