1.1 Provide a text equivalent for every non-text element

Full WAI text: "Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video."

All information must be presented in text. This means that if any other media are used, such as images, the information they contain should be repeated in a text description. This description must be 'equivalent', meaning that it must convey the same information as the object it is describing. "alt" and "longdesc" are techniques for creating text-equivalents (see Directions and Techniques, below).

The most common examples of non-text elements are images, animations, movies and sounds. Images may consist of artwork, photographs and coloured fills or spacers. However, they may also be drawings of text, used for titles, headings or company logos. In this case, they are not text. Text means only what is called "real text", and is made up of ASCII or unicode characters. This does not include drawings of text. Similarly, images used for buttons must also have a text equivalent, since they do not contain real text.

Image maps are images which are made up of many parts, each of which is a separate graphical button or link.

ASCII art is the name given to pictures that are made up of many text characters, in the same way that a newspaper image is made up of many dots. The resulting picture has a meaning that cannot be deduced from the characters or dots. This meaning must be presented in an alternative text description. The name "ASCII" is the name of a common character encoding system used by computers.

Programmatic objects, such as scripts and applets, are another type of non-text element. These are pieces of functionality written in languages other than HTML, to provide dynamic or interactive behaviour ranging from simple visual effects to mini applications. Examples include pop-up menus coded in DHTML, scrolling "tickers" and interactive applications such as tax calculators or games written in Java or Macromedia Flash. Any effect or functionality can potentially be provided by using a script or applet.

Sounds include downloadable or streaming speech, audio cues, alert tones and the audio track on a video.

Not all users can access or use these elements directly and will therefore require that the equivalent information or functionality is provided in text format. There are a variety of HTML techniques which can be used to provide equivalent information, including "alt" and "longdesc", both of which can be used supplement visual images with text.

Rationale

For some users, text is the only medium they can access. Someone who is blind cannot see the screen so they cannot read information which is provided in an image. If titles are presented as images, for visual appeal, users who are blind will not be able to read them and will miss a lot of important information. If images are used for buttons and navigation links, blind users may not be able to use or navigate the site at all. Information presented in pictures, graphs, charts or photographs will also be unavailable to users who are blind unless there are text equivalents.

Visually impaired users often use a screen reader, a program that interprets the text contents of the screen and outputs this either to a speech synthesiser or a Braille display. If non-text elements have text equivalents, the screen reader can read those. If there is no text equivalent, the screen reader will inform the user that there is an element there but not tell them anything about it, except perhaps the file name.

Someone who is deaf cannot hear warning sounds, narration or other audio information. However, they may be able to read text equivalents.

Many users have old equipment or slow modems and connect via continually metered telephone lines. These users often turn off image downloading to save time and money.

Directions and Techniques

Use Alt text

For simple non-text objects, such as pictures and graphical titles or buttons, you should specify a text description using the HTML "Alt" attribute. "Alt" stands for "alternative".

The alt text should be carefully worded so that it provides equivalent information. Unless the alt text effectively conveys the information an image displays, it will be ineffective. If you use alt text to provide text equivalents for images used as links, the text should make sense as a link title when read out of context. For images that are purely decorative and contain no information, such as spacers, lines and fills, use null alt text (described below).

See the WAI recommended techniques for Using alt text for providing equivalent text content for images and Providing text equivalents for applets and programmatic objects.

Use null Alt text for objects that contain no information

For images that are purely decorative and contain no information, such as spacers, bullets, lines and fills, use the null value for the Alt text (Alt=""). This will be ignored by most assistive technologies such as screen readers and avoids the user being bombarded with hundreds of useless descriptions such as "a spacer, a spacer, a blue line, bullet, bullet, bullet...". Note that null alt text has no characters between the quotes. This is not the same as Alt=" ", which contains a space and is not therefore null Alt text. Assistive technologies may not ignore objects with Alt text which contains a space.

See the WAI recommended techniques for Using images as bullet points and Using images as links.

Provide a long description if Alt text will not be adequate

Alt text is not really useful for explaining information that is too complex to describe in only a few words. For example, if you were to display a graph showing population growth in three countries (France, Germany and Spain) from 1995 to 2001, you could use Alt text to give a basic description of the graph, such as:

"Graph showing population growth in France, Germany and Spain, 1995 to 2001" -

However, the information contained in the graph may be quite complex and may therefore require a longer description. It may show individual colour-coded line plots for each country, allowing the user to quickly identify overall trends and make comparisons.

This is beyond the capabilities of Alt and in this case, you should use the HTML "Longdesc" tag or a "D" link. Both techniques allow users to access a separate, detailed text description of the content. Longdesc, though part of the HTML specification, is not widely suported by browsers. The alternative "D" link technique involves inserting, beside the image, a link which is presented as a capital "D". The target of this link should be a separate web page which displays the long description in text-only format. Once the user has read this, they can then return to the page with the image. "Longdesc" stands for "long description".

See the WAI recommended techniques for Providing long descriptions with Longdesc and the "D" link.

Provide a text equivalent for each active link contained in an image map

See the WAI recommended technique for Providing text equivalents of links contained in image maps. Note that the link should be a client-side link to work with this technique.

How you could check for this:

Switch off image downloading in your browser

This will show you how the page looks without images. You should be able to see alt text where images no longer display. Ask yourself whether the alt text is appropriate or not.

Switch off scripts and Java in your browser

This will let you see you how the page looks and works without scripts and applets. From this, you can determine whether or not it is possible to use the page without scripts and applets.

- View WAI Checkpoint 1.1