Section 508 Compliance

HTML Coding Tutorial

Alternate Descriptions for Non-Text Elements
(a): A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
Explanation: Non-text elements include: images, graphical representations of text (including symbols), image map regions, animations, applets, and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds, stand alone audio files, audio tracks of view, and video shall include a description informing the viewer what s/he is viewing.
Importance: If an image link is broken or does not display properly, the information in the alt (or longdesc) tag will appear where the image should, describing what the image is. Or as a screen reader reads through the page, the only way the program can decipher an image is through the alt, longdesc, etc. tags. Without these tags included in the HTML code, the screen reader will not be able to describe the image to the user.

Bad Coding Examples
1.  Missing alt tags/text
WAC Approved Logo <img src="images/wacapp.gif width="60" height="30">
2.  Improper decorative image alt tags/text use
<img src="images/waterdrop2.gif width="100" height="160">
OR
<img src="images/waterdrop2.gif width="100" height="160" alt="A drop of water hitting water and creating a rippling effect">
3.  Improper "spacer" alt tags/text use
<img src="images/spacer.gif" width="100" height="100" alt=" ">
OR
<img src="images/spacer.gif width="100" height="100" alt="spacer">
4.  Bad use of alt tags/text (not including words on the image)
School of Aquatic Arts Logo <img src="images/saa.gif" width="400" height="300">
OR
<img src="images/saa.gif" width="400" height="300" alt="Logo">
5.  Missing longdesc tag and D-link for complex images
Location Map, example only <img src="images/locmap.gif" width="220" height="220">
OR
<img src="images/locmap.gif" width="220" height="220" alt="Location map">
6.  Improper use of quotes (e.g. " ")
<img src="images/dotty.gif width="50" height="50" alt=" ">
OR
<img src="images/dotty.gif width="50" height="50" alt="" "">

Good Coding Examples
1.  No missing alt tags/text
WAC Approved Logo <img src="images/wacapp.gif width="60" height="30" alt="WAC Approved Logo">
2.  Proper decorative image alt tags/text use
<img src="images/waterdrop2.gif width="100" height="160" alt="">
3.  Proper "spacer" alt tags/text use
<img src="images/spacer.gif" width="100" height="100" alt="">
4.  Good use of alt tags/text (not including words on the image)
School of Aquatic Arts Logo <img src="images/saa.gif" width="400" height="300" alt="School of Aquatic Arts Logo">
5.  Correct longdesc tag and D-link for complex images
Location Map, example only <img src="images/locmap.gif" width="220" height="220" alt="Location map" longdesc="locmap.htm"><a href="locmap.htm">D</a>
6.  Proper use of quotes (e.g. "")
<img src="images/dotty.gif width="50" height="50" alt="">

Do-It-Yourself Fixes
When you are hard coding (working in HTML, etc) a web site, it's very easy to change your code to satisfy the alt tag requirement. Just be sure to insert the alt tag and text somewhere in the image tag, and you should be set.

To make sure you satisfy the six general uses of alt tags, just follow these simple rules:

  1. ALWAYS include an alt tag for every image
  2. Either put in a description of the image, or leave the alt tag blank (alt="")
  3. Words in the picture should also be included in the alt tag
  4. Include the longdesc tag if the image needs a complex explanation
Following these guidelines should ensure your site is compliant with the first part of the Section 508 Accessibility Guide.