Accessibility standard requirements
1: Provide a text equivalent for all non-text elements
(Based on: W3C: 1.1; DOJ, Section 508: a)
- For images that convey information: provide an ALT description
- For decorative or spacer images: provide an empty ALT description (ALT=" ")
- For image maps: provide an ALT description for each mapped area
- For images with lots of information requiring very long descriptions: provide a <LONGDESC> and a D-link, referring the reader to a linked description page. (This is useful for charts, graphs or images where the explanation is more complicated than just a few words.)
- For ASCII art: Provide method for user to skip over the ASCII art and provide linked description of art. (Try to substitute common ASCII art symbols with their text alternative such as <wink> for ;-).)
Rationale:
- Information conveyed in all non-text elements must also be readable
by screen readers, non-visual browsers, and Braille readers.
A. How to place an ALT description in an image element:
<IMG SRC="filename.gif" width="220" height="165" ALT="description of image goes here">
B. How to place an ALT description in an image element used only as decoration or a
spacer (contains no information):
<IMG SRC="filename.gif" width="220" height="165" ALT=" ">
C. How to place an ALT description to an image map:
<IMG SRC="images/filename.gif" width="212" height="100" usemap="#navigation" border="0" ALT="example of navigation">
<MAP NAME="navigation">
<AREA SHAPE="rect" coords="8,7,91,30"
HREF="classes.html" ALT="classes">
<AREA SHAPE="rect" coords="8,37,95,60"
HREF="contact.html" ALT="contact">
<AREA SHAPE="rect" coords="8,65,140,90"
HREF="information.html" ALT="information">
</MAP>
D. How to link to a long description using the D-link:
<IMG SRC="images/chart.gif" ALT="cups of coffee chart" LONGDESC="cups-coffee.html"
width="286" height="180">
<A HREF="cups-coffee.html">[D]</A>
The LONGDESC attribute and the D-link lead the reader to a page that describes the content of the image, graph, table, plug-in or applet that is being described. For a cleaner look, a transparent image containing the ALT description\ “D” may be substituted for the D-link text. This text-equivalent should not replace the LONGDESC attribute, only the visible D-link.
E. How to skip over ASCII art:
<A HREF="#post-art">skip over ASCII art</a> <!-- ASCII art goes here --> <A NAME="post-art">description of art</A>
For a cleaner look, replace the visible link with a transparent image (containing the ALT description, “Skip over ASCII art”) that is linked to the description of the ASCII art.
Read more on providing text equivalents to non-text elements