Technique G94:Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

Description

The objective of this technique is to create a text alternative that serves the same purpose and presents the same information as the original non-text content. As a result, it is possible to remove the non-text content and replace it with the text alternative and no functionality or information would be lost. This text alternative should not necessarily describe the non-text content. It should serve the same purpose and convey the same information. This may sometimes result in a text alternative that looks like a description of the non-text content. But this would only be true if that was the best way to serve the same purpose.

If possible, the short text alternative should completely convey the purpose and information. If it is not possible to do this in a short phrase or sentence, then the short text alternative should provide a brief overview of the information. A long text alternative would be used in addition to convey the full information.

The text alternative should be able to substitute for the non-text content. If the non-text content were removed from the page and substituted with the text, the page would still provide the same function and information. The text alternative would be brief but as informative as possible.

In deciding what text to include in the alternative, it is often a good idea to consider the following questions:

• Why is this non-text content here?
• What information is it presenting?
• What purpose does it fulfill?
• If I could not use the non-text content, what words would I use to convey the same function and/or information?

When non-text content contains words that are important to understanding the content, the alt text should include those words. If the text in the image is more than can fit in a short text alternative then it should be described in the short text alternative and a long text alternative should be provided as well with the complete text.

Examples

• A search button uses an image of a magnifying glass. The text alternative is "search" and not "magnifying glass".
• A picture shows how a knot is tied including arrows showing how the ropes go to make the knot. The text alternative describes how to tie the knot, not what the picture looks like.
• A picture shows what a toy looks like from the front. The text alternative describes a front view of the toy.
• An animation shows how to change a tire. A short text alternative describes what the animation is about. A long text alternative describes how to change a tire.
• A logo of the TechTron company appears next to each product in a list that is made by that and has a short text alternative that reads, "TechTron."
• A chart showing sales for October has an short text alternative of "October sales chart". It also has a long description that provides all of the information on the chart.
• A heading contains a picture of the words, "The History of War" in stylized text. The alt text for the picture is "The History of War".
• An image of a series of books on a shelf contains interactive areas that provide the navigation means to a Web page about the particular book. The text alternative "The books available to buy in this section. Select a book for more details about that book." describes the picture and the interactive nature.

Related Techniques

• G92: Providing long description for non-text content that serves the same purpose and presents the same information
• G95: Providing short text alternatives that provide a brief description of the non-text content
• G196: Using a text alternative on one item within a group of images that describes all items in the group
• H2: Combining adjacent image and text links for the same resource
• H24: Providing text alternatives for the area elements of image maps
• H36: Using alt attributes on images used as submit buttons
• H37: Using alt attributes on img elements
• H53: Using the body of the object element
• H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak

Tests

Test Rules

The following are Test Rules related to this Technique. It is not necessary to use these particular Test Rules to check for conformance with WCAG, but they are defined and approved test methods. For information on using Test Rules, see Understanding Test Rules for WCAG Success Criteria.

• Image accessible name is descriptive
• Image button has non-empty accessible name
• Image has non-empty accessible name
• Image filename is accessible name for image