1.1 L1 SC1: Text-alternatives are explicitly associated with non-text content and one of the following is true:

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.”

Text alternatives for non-text content that conveys information

This technique relates to the following sections of the guidelines:

Task:

If the non-text content conveys information, then the text alternative must convey the same information. Ask, "What information does the non-text content convey?" and provide that information in text.

Determining what information the non-text content conveys may also require you to:

  • consider the context in which the non-text element occurs;

  • consider the non-text content both from

    • the content provider’s point of view and

    • from the user’s point of view.

What does the content provider want people to learn from the non-text content? What does the user need to learn from the text alternative? Is it important for users to draw their own conclusions based on the content as well as understanding the specific point the content-provider wanted to make?

Providing the information in text may require more than one step. For example, a complex image such as a chart, map, diagram, or photograph of an important person, place, event, or object may need two text alternatives:

  1. to identify the non-text item and

  2. to describe it or provide the information it conveys.

In the examples below, a single piece of non-text content is used in different contexts that require different text alternatives.

  • A photograph of an historic event. A photograph of two world leaders shaking hands accompanies a news story about an international summit meeting. The text alternative says, “President X of Country X shakes hands with Prime Minister Y of country Y.”

  • The same image used in a different context with additional text alternative. The image of the president shaking hands with the prime minister appears on a Web site discussing intricate diplomatic relationships. The first text alternative reads, “President X of country X shakes hands with Prime Minister Y of country Y on January 2, 2009.” An additional text alternative describes the room where the leaders are standing, the expressions on the leaders' faces, and identifies the other people in the room.

    The additional description might be included on the same page as the photograph or in a separate file associated with the image through a link or other standard programmatic mechanism.

    An audio recording. The Web page described in the previous example includes a link to an audio recording of the leaders' press conference. The page also links to a text transcript of the press conference. The transcript includes a verbatim record of everything the speakers say. It identifies who is speaking as well as noting other significant sounds that are part of the recording, such as applause, laughter, questions from the audience, and so on.

    Editorial Note: Further discussion and examples are needed for real-time silent video such as webcams.

Text alternatives for non-text content that creates a specific sensory experience [music without words]

Task:

If Web content contains audio of instrumental music, provide a text alternative that identifies the music and makes it clear that it does not include a vocal component.

Editorial Note: In this draft, part C of the Level 1 success criterion for Guideline 1.1 is divided into two techniques this one (music without words) and the next (visual art). Is this confusing? Should they merge into one?

A text alternative that provides the title of the piece and identifies the composer and/or performer(s) may be sufficient. In some cases, it may be appropriate to provide a brief additional description of the piece. Again, consider the context in which the audio occurs and the purpose for which it is used when deciding how much additional information to provide. It may also be appropriate to write such descriptions in a style suited to the purpose and context: for example, a scholarly description would be quite different from a description on a popular music site.

For information about providing text alternatives for music that includes words, see the section on text alternatives for audio recordings, earlier in this document. Be aware, however, that it may be illegal to include the lyrics of songs for which you do not own the copyright. In such cases, it may be appropriate to provide a summary of the lyrics .

Do not assume that people who are Deaf or hard of hearing have no interest in music!

Editorial Note: Need to include examples.

Text alternatives for non-text content that creates a specific sensory experience [visual art]

Task:

Placeholder

[Editor’s note: material on identifying and describing visual art still to come.]

Text alternatives and non-text content that does not provide functionality or convey information

Task:

If the non-text content does not provide functionality or convey information, then mark the non-text content so that it may be ignored. Ask, "Will it be distracting? Is the non-text content necessary to understand the rest of the content? Is there another way to create the effect?"

Where users might want to be made aware that such content is present, use the techniques described above. In most cases, users find it distracting to know about individual units of non-text content that do not convey information or provide functionality. For example, “spacer” images - transparent images used to control the layout of content - are not visible to most users. However, screen readers will read text alternatives associated with spacer images, which is distracting and oftentimes confusing. The same is true for many decorative graphics that are used to enhance readability by breaking up large blocks of text or simply to enhance the visual appearance of the page. To avoid these distractions, either:

  • Mark decorative non-text content in such a way that a user agent can ignore it or

  • Create decorative effects with more accessible methods.

Resources:

HTML Techniques:

CSS Techniques: