Alternative text for image descriptions
Appropriate alternative text for images and other media such as videos is one of the key content enablers for those that cannot see the image. These include screen reader users such as Carole, who is blind, and Maria, who has a visual impairment.
It also includes those who have switched off image downloads due to slow internet connections.
Alternative text should be concise and provide an accurate description of the visual content. In association with surrounding text it should accurately describe the content and purpose of the image.
The provision of useful alternative text for images is dependent on a number of factors apart from the content of the image itself. These factors include the purpose or role of the image within the document and the kind of image it is. For example is it a graph or a picture of some object or an image of text?
The context of the image, i.e. the page it occurs on, the overall purpose of the page or document in which it occurs and the content surrounding the image, plays a big part in determining appropriate alternative text. Images must have text alternatives that describe the information, reflect the role, specify the function, indicate the target of the link or in the case of charts convey the data represented by the images.
In general, alternative text should be accurate and equivalent - specifying the same information that the image is meant to convey. It should be concise and precise by representing the information in as many words as necessary, but no more than required. It should not be redundant, repeating the same information that is already available in the text content of the page where the image occurs.
Categories of Images
There are three broad categories of images: decorative, functional and informative.
Decorative images are typically used for layout or visual aesthetic purposes. They do not provide information content on the page.
They also do not represent links, for example to the home page or important site functionality, such as settings or save file. Examples of decorative images are line breaks or geometric patterns used to give the page a visual style. Alternative text is not specified for decorative images in documents.
When coding for web pages, the alt attribute is left empty (alt=“ “).
Short tutorials are available: W3C Web Accessibility Initiative tutorial on Decorative images or the Web Accessibility in Mind (WEBAIM) Tutorial on Decorative Images
Functional images are those images that represent functions or links within a page.
Examples of functional images are those that appear on the ribbons of word processors representing formatting functions, such as bold and italics, pictures of clipboards representing copy and paste functions, scissors representing cut, cans of paint representing fill functions and pictures of printers representing print functions.
The text alternative for these functional images should use one word related to the function. The alternative text for a printer image should be (alt=“Print”).
Images which have links behind them like the classic Home icon, are also considered functional images. The text alternative for these images should indicate the target page of the link. For example - the company logo on a web page often has a link to the site home page and the appropriate alternative text for this image should be (alt=“Company Name home page”).
Short tutorials are available: W3C Web Accessibility Initiative tutorial on Functional images or the Web Accessibility in Mind (WEBAIM) Tutorial on Functional Images
Informative images are images that graphically represent concepts and information. The major kinds of informative images are listed below:
- Pictures, photos and illustrations are typical examples of informative images. The text alternative should be at least a short description conveying the essential information presented by the image.
Short tutorials are available: W3C Web Accessibility Initiative tutorial on Informative images or the Web Accessibility in Mind (WEBAIM) Tutorial on alternative text basics for Images
Images of text: Readable text is sometimes presented within an image. If the image is not a logo, text in images should be avoided.
However, if images of text are used, the text alternative should contain the same words as found in the image. But they have to be short: the alternative attribute for images, in HTML for instance, is limited to 128 characters of simple text, so a text on an image displayed on a web page should not exceed this number of characters.
Short tutorials are available: W3C Web Accessibility Initiative tutorial on Images of Text
Complex images such as graphs and diagrams: To convey data or detailed information, the text alternative should be a full text equivalent of the data or information provided in the image.
Depending on the type of document, it may have to be on another page, linked to the original image as is usually the case in web pages.
Short tutorials are available: W3C Web Accessibility Initiative tutorial on Complex Images or the Web Accessibility in Mind (WEBAIM) Tutorial on Complex Images
Sometimes there is more than one image to consider, for example a connected group of images or an image map. Groups of images: If multiple images convey a single piece of information for example a five star hotel rating represented by five pictures of stars, the text alternative for one image should convey the information conveyed by the entire group.
A short tutorial is available: W3C Web Accessibility Initiative tutorial on Group Images
Image maps: The text alternative for an image that contains multiple ‘clickable’ areas, for example a map of a city with different areas such as the north and south side, should provide an overall context for the set of links.
In addition, each individual ‘clickable’ area should have alternative text that describes the purpose or destination of the link.
Short tutorials are available: W3C Web Accessibility Initiative tutorial on Imagemaps or the Web Accessibility in Mind (WEBAIM) Tutorial on Image maps.
In the next step, there is a short quiz where you can check your understanding about producing alternative text for images.
© This work is a derivative of a work created by Dublin Institute of Technology and Université Paris 8 Vincennes Saint-Denis, and licensed under CC-BY BY 4.0 International Licence adapted and used by the University of Southampton. Erasmus + MOOCs for Accessibility Partnership.