1.1 L1 SC1: For all non-text content that is functional, such as graphical links or buttons, text alternatives identify the purpose or function of the non-text content.

Text alternatives for non-text content that provides functionality

This technique relates to the following sections of the guidelines:

Task:

If the non-text content provides functionality, then the text alternative must provide the same functionality. Ask, "What is the function of the non-text content?" and express that function clearly and concisely.

Editorial Note: The use of "clearly" and "concisely" makes this untestable. Will that be an issue for readers?

Here are some examples:

  • A graphical navigation link. A navigation bar includes a small image showing a house. The image is a link to the site's home page. The text alternative says "Home."

  • A graphical icon. A Web page provides a text transcript of a press conference. The page also includes a graphical icon linked to an audio recording of the press conference. The text alternative reads, "Audio recording of press conference."

  • A graphical button. A search form includes a button featuring the image of a magnifying glass. The text alternative for the graphic says “Search.”

Resources:

HTML Techniques:

CSS Techniques: