Image Tags

Image Tags

A text equivalent for every
non-text element shall be provided (e.g., via "alt", "longdesc", or
in element content).

ALT Text

A text equivalent means adding words to represent the purpose of
a non-text element. This provision requires that when an image
indicates a navigational action such as "move to the next screen" or
"go back to the top of the page," the image must be accompanied by
actual text that states the purpose of the image. This provision
also requires that when an image is used to represent page content,
the image must have a text description accompanying it that explains
the meaning of the image.

Before:

<img src="/sites/default/files/accessibility/logo-green.gif">

After:

<img src="/sites/default/files/accessibility/logo-green.gif"
alt="Green Company Logo">



Empty ALT Attribute

Web page authors often utilize
transparent graphics for spacing. Adding a text description to these
elements will produce unnecessary clutter for users of screen
readers. For such graphics, an empty ALT attribute is useful.

Before:

<IMG src="/sites/default/files/accessibility/transparent.gif" alt="blank
space">

After:

<IMG src="/sites/default/files/accessibility/transparent.gif" alt="">

D-link and LONGDESC

When an image has complex data, you can refer a user to another page
that provides a detailed textual description using the LONGDESC attribute.
The values for LONGDESC would be the page description's url. Unfortunately, most browsers
do not support this attribute (Note: JAWS does). Which is why a "D" link is also recommened.

Example:

<img src="/sites/default/files/accessibility/images/graphexample.jpg" alt="Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities" class="border"
longdesc="/graphexample.html">

<a href="/accessibility/graphexample.html" title="Detailed Description of Ice Cube Trade
Sales">D</a>

Ice Cube Trade SalesD

Element Content

Finally, yet another way of providing a textual description is
to include it in the page in the surrounding context:

Below is a picture of the Cal State L.A. Solar Eagle III!

Solar Eagle III

Top