1. A text equivalent for every non-text element
(e.g, via "alt","longdesc", or in element content)
shall be provided. 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.
(508:A. W3C: 1.1 Priority 1)
Text Equivalents for:
- Images and Graphical Buttons
- Images used as List Bullets
- Images used as "Spacers"
- Scripts
- Other types of non-text elements
Text Equivalent for Images and Graphical Buttons
For a simple, decorative or incidental image, a brief description may be all that
is necessary: e.g.
This drawing of a house is just a drawing of a house, so the code could be:
-------------------
If the image is linked, you must describe the destination or purpose of the link --
not the image, e.g.
Here, the drawing of a house is a button that links to the home page, so the code could be:
<img src="images/home.gif" alt="Link to the Home page" />
</A>
-------------------
If the information contained in the image is important to the meaning of your page (i.e. some important content would be lost if the image was removed), then you must provide a longer description than the "alt" attribute can reasonably display. The "longdesc" attribute was created for this reason.
<img src="graph1.gif" longdesc="graph1.htm" ALT="3-d sales chart" />Future browsers or other agents will provide an optional a link to the description file
called "graph1.htm". Until such browsers do so, also include a
<a href="graph1.htm">
link for the graphic. Click on the graphic to see how it works.
Text Equivalent for Images used as List Bullets
Here is a simple unordered list that uses graphical bullets instead of the default bullets created by the <UL> element:
Telephone
Pencil
Calendar
The example code shows three different but appropriate ways to use the alt parameter to label the bullet.
<img src="images/blueball.gif" alt="* " /> Telephone <br><img src="images/blueball.gif" alt="Item: " /> Pencil <br>
<img src="images/blueball.gif" alt=" " /> Calendar <br>
- You might use an asterisk "*" or a dash "-" to provide a common text alternative to a graphical bullet.
- You might use "Item" or some other simple text to highlight the item, especially if there are not many entries in the list.
- If you have a large number of items in your list, then it might be appropriate to type a blank space between the quotation marks of the alt attribute. This would save the user of a screen reader from hearing "Item..." repeated time after time.
Text Equivalent for Images used as "Spacers"
A layout trick used by many authors is to create a very small transparent image
file
and force
white space between other objects by setting the required height and width or hspace and
vspace attributes of the IMG element. The appropriate text equivalent for a "spacer" would
be nothing at all, so:
Note that there is a blank space between the quotation marks in the alt-attribute.
Use the NOSCRIPT element to describe the action or replace the functionality of any scripts you embed in your page.
For example, if you write a SCRIPT that animates a comic strip by presenting a new panel whenever the user mouse-clicks or presses a key, then use the NOSCRIPT element to provide a text alternative that describe the entire comic strip. For example:
<script type="text/javascript">... script to display and replace each frame of the comic strip as requested by a user event ...
</script>
<noscript>
In the first panel, Lucy is holding the football. In the second panel, Charlie Brown is seen charging towards the football. And so on..."
</noscript>



