Adding Alt Text Based On The Purpose Of The Image

Images must have text alternatives that describe the information or function represented by them. This ensures that images can be used by people with various disabilities. This tutorial demonstrates how to provide appropriate text alternatives based on the purpose of the image.

Informative images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.

https://www.youtube.com/watch?v=xcWwcTRS79s

1. Decorative images: Provide a null text alternative (alt=””) when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
2. Functional images: The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
3. Images of text: Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
4. Complex images such as graphs and diagrams: To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the text alternative.
5. Groups of images: If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
6. Image maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.

Informative images

Informative images convey a simple concept or information that can be expressed in a short phrase or sentence. The text alternative should convey the meaning or content that is displayed visually, which typically isn’t a literal description of the image. In some situations a detailed literal description may be needed, but only when the content of the image is all or part of the conveyed information. Whether to treat an image as informative or decorative is a judgment that authors make, based on the reason for including the image on the page.

Examples of Informative images:

1. Images used to label other information. This example shows two image icons – one of a telephone, one of a fax machine.

0123 456 7890

0123 456 7891

2. Images Used to Supplement Other Information. A short text alternative is sufficient to describe the information that is displayed visually but is not explained in the text; in this case, the text alternative is “Dog with a bell attached to its collar.”.

Example:

Off-duty guide dogs often wear a bell. Its ring helps the blind owner keep track of the dog’s location

3. Images Conveying Succinct Information. This simple diagram illustrates a counter-clockwise direction for unscrewing a bottle top or cap. The information can be described in a short sentence, so the text alternative “Push the cap down and turn it counter-clockwise (from right to left)” is given in the alt attribute.

Example:

4. Images Conveying an Impression or Emotion

Note: An alternative technique would be to provide the instructions within the main content rather than as a text alternative to the image. This technique makes all information available in text for everyone while providing an illustration for people who prefer to view the information visually.

Decorative Images 

1. Image With Adjacent Text Alternative
2. Image Used for Ambiance (Eye-candy)
3. Image is used only to add ambiance or visual interest to the page.

Decorative images don’t add information to a page’s content. E.g. the image’s information may be given in adjacent text; or the image’s purpose may be to make the page more visually attractive.

In these cases, assistive technologies should be instructed to ignore the image by the use of null (empty) alt text should be provided (alt=””). The addition of text values for these images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text.

The author must make a judgment about whether or not to treat an image as decorative based on the reason for including the image on the page. Images may be decorative when they are:

• Supplementary to link text to improve its appearance or increase the clickable area;
• Illustrative of adjacent text but not contributing information (“eye-candy”);
• Identified and described by surrounding text.

The examples below show how to use the alt attribute when decorative images are provided using the <img> element.

Functional images

Functional images initiate actions rather than convey information. They are used in buttons, links and other interactive elements. The text alternative for the image should convey the action that will be initiated (the purpose of the image), rather than a description of the image.

1. Image Used Alone as a Linked Logo
2. Logo Image Within Link Text
3. Icons Images and Images Used in Buttons

Example:

Search: 

4. Stand-alone icon image that has a function

Example:

Images of Text

Images of text display text that is intended to be read. With the current CSS capabilities in most web browsers, it is good design practice to use actual text that is styled with CSS rather than image-based text presentation. Genuine text is much more flexible than images: It can be resized without losing clarity, and background and text colors can be modified to suit the reading preferences of users. Images are more likely to distort and pixelate when resized. In those rare situations where images of text must be used, the text alternative must contain the same text presented in the image.

Note: Images of text should not normally be used on web pages. 

1. Styled text with decorative effect

Example:

The text alternative for this image is the same as the slogan presented in the image: “Your access to the city”. 

2. Image of text used as an unlinked logo

Example:

Note 1: Images used as logos are exempt from some of the accessibility requirements that apply to other images of text. For example, there are no minimum color contrast and text size requirements.

Note 2: If this logo were linked then it would become a functional image. See Functional Images: Image used alone as a linked logo.

3. Mathematical expressions

As with other images, the author is in the best position to determine what information is intended to be conveyed by the image and construct the text alternative accordingly.

Example:

The preferred method for displaying math expressions is MathML, which can present mathematical expressions semantically.

If math forms are a substantial part of the content (for example, for online maths courses), MathML should be used instead.  For more complex expressions or equations, text alternatives for images are unlikely to provide sufficient detail succinctly. MathML helps provide such semantics within the code rather than as text.

Complex images 

Complex images contain more information than can be conveyed in a short phrase or sentence. These are typically:

1. Graphs and charts, including flow charts and organizational charts;
2. Diagrams and illustrations where the page text relies on the user being able to understand the image;
3. Maps showing locations or other information such as weather systems.

In these cases, a two-part text alternative is required:

1. A short description to identify the image, and where appropriate, indicate the location of the long description.
2. The long description – a textual representation of the essential information conveyed by the image.

The first part is the short description to identify the image and, where appropriate, indicate the location of the long description. The second part is the long description – a textual representation of the essential information conveyed by the image.

Long descriptions

There are situations where the composition of an image is important and needs to be provided in the long description. For example, the sequence of colors used and the relative heights of the columns in a bar chart may be relevant information about the structure of the chart, in addition to the actual values and trends that it depicts.

Remember that complex images can be difficult to understand by many people – in particular people with learning disabilities and people with low vision. Long descriptions benefit many people, and it is good practice to make them available to everyone, for example, as part of the main content. It may also be possible to reduce unnecessary complexity in your images and make them easier to understand for everyone.

Long descriptions examples:

In this example, a bar chart of website visitor statistics has the short description “Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3”, provided through the alt attribute of the image. The long description provides detailed information, including scales, values, relationships and trends that are represented visually.

Description containing textual information

The WAI-ARIA aria-describedby attribute can be used to link to a description of the image that is provided anywhere on the same web page, in a similar way to the longdesc approach. The value of the attribute is the id of the element that provides the long description.

Important: The element referenced by aria-describedby is treated as one continuous paragraph of text. Screen readers and other assistive technology do not have access to structural information, such as any headings and tables. They will read out or provide the text of any contained elements without indicating their structural relationships, and without the corresponding navigation mechanisms. As a result, this approach only works for long descriptions that are text-only, without needing structural information as was needed in the previous example.

The male is metallic blue on the crown, the feathers of the head being short and curled. The fan-shaped crest on the head is made of feathers with bare black shafts and tipped with blush-green webbing. A white stripe above the eye and a crescent shaped white patch below the eye are formed by bare white skin. The sides of the head have iridescent greenish blue feathers. The back has scaly bronze-green feathers with black and copper markings.

Groups of Images

Sometimes groups of images are used together to represent one piece of information. For example, a collection of star icons that together represent a rating. In this case, only one of the images needs a text alternative to describe the entire collection, while the other images have a null (empty) alt attribute so that they are ignored by assistive technology.

In other cases, a group of images may represent a collection of related images. For example, showing a collection of art impressions that are thematically related. In this case, each image needs its text alternative that describes it individually, as well as its relationship within the group.

1. Multiple images conveying a single piece of information

This group of five images combined shows a product rating. There are five images (three filled stars, one half-filled star and one empty star) indicating the overall rating. The text alternative for the first image is “Rating: 3.5 out of 5 stars”. All other images have a null (empty) alt attribute (alt=””).

Example:

Rating:

2. A collection of images

In the example below, the HTML5 <figure> and <figcaption> elements are used to provide a caption for each image in a collection. The <figure> element can be nested, which is used in the example to provide a caption for the entire collection of images. The WAI-ARIA attribute role with the value of group is used to indicate this grouping to assistive technologies, aria-labelledby makes sure that the figcaption elements are used as labels for the individual groups.

Note: The web browser and assistive technology support vary for this particular WAI-ARIA attribute and value.

Example:

The castle through the ages: 1423, 1756, and 1936 respectively.

Charcoal on wood. Anonymous, circa 1423.