home \| site index \| campus email
search

Web Accessibility - Priority 1

Web Accessibility: Priority 1

Web Accessibility: Text Equivalents

Provide Text Equivalents for All Non-Text Elements

Non-Text elements include images, image maps, graphics, images used as list bullets, graphical buttons, symbols, animations, applets, programmatic objects, ASCII art, frames, scripts, spacers, audio (played with or without user interaction), audio tracks of video, and video. This can be done via "alt", "longdesc", or in element content. As text equivalents, ALT attributes should fulfill the same function as the image.

For example:

alt="American Flag."

conveys the same information as an image of the American Flag when presented to users.

Avoid starting each ALT with a phrase such as "this button will." This would unnecessarily slow down individuals using screen readers. Consider the length of the ALT text in relation to the size of the image. If possible, the text should display within the image space when images are off. For ALT attributes greater than 150 characters, consider providing a separate description (see LONGDESC attribute).

Do not specify irrelevant alternate text when including images for purely decorative purposes. For instance, when an image of a red ball is used for decorating a heading or paragraph, rather than using:

alt="red ball."

simply use the empty ALT attribute:

alt=""

Even though the ALT attribute is empty, it is still necessary to use one. Otherwise, without an ALT attribute present, a screen reader will simply read "image" when encountering a graphic. However, when using an image for a bullet in a list of items, an appropriate text equivalent may be:

alt="*"

This will assist those using screen readers to differentiate listed items.

Include Redundant Text Links with Server-side Image Maps

Web browsers, when used with a screen reader or when used with image loading turned off, have no way of accessing the hot spots in a server-side image map. If the links at these hot spots have no corresponding link in the body of the Web page then whole portions of a Web site can become unreachable. For each hot spot, provide a text link elsewhere. For example, when providing a map of Grossmont College with different regions on which users can click for more information, also list regions as hypertext links elsewhere on the page.

A good test to determine if a text equivalent is useful is to imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener?

Provide Summaries of Graphs, Maps and Charts

For complex content (e.g., a chart, table, or diagram) where the ALT text does not provide a complete text equivalent, the description can be included in the text of the main Web page, or placed in a separate page for this purpose and referenced by using the LONGDESC attribute or D-link.

The D-link, or descriptive link, is a way to link manually to the target of the LONGDESC by linking a D positioned near the image. As most current Web browsers do not yet support the LONGDESC attribute, it is recommended that both LONGDESC and D-link be used.

For example:

<IMG SRC="chart.gif" ALT="Chart: Compares top four law 
               firms" LONGDESC="law.txt" TARGET="_blank">

               <A HREF="law.txt" TARGET="_blank">D</A>

               (This link opens a new window.)