Skip over primary navigation
Web Publishing Guide
Accessibility
Text Equivalents
Adequate alternate text for all non-text elements, including the following:
  • Images
  • Graphical representations of text (including symbols)
  • Image map regions
  • Animations (e.g., animated GIFs)
  • ASCII art (images created using keyboard elements) :-)
  • Scripts
  • Applets (i.e., newsticker on a website)
  • Spacers
  • Graphical buttons
  • Audio (played with or without user interaction)
  • Video

How do you do this?

  1. Alt tags
  2. Longdesc or description tags
  3. Text equivalent versions

Alt text is read by assistive devices like screen readers to provide helpful information to users of such devices. It is important to write alt text that is informative. A common error people make with alt text is simply typing in a generic term like, "image," "graphic," or "logo," instead of something that would actually be informative. For example, informative alt text for a portrait of a faculty member would be "Portrait of Professor John Doe." If there were contextual details, those might be included, "Portrait of Professor John Doe in front of Sheldon Hall." In the case of a graphic image, descriptive information is preferable: "Auxillary services corporate logo," for example.

1. Alternate text is added mainly by the use of "alt" tags, which are incorporated into the reference to an image, image map, applet, etc. For example, if you have an image that needs an alt tag, the code looks like this:

<img src="magnifyingglass.gif" alt="Search">

Image maps require alt tags for the image and the links (hotspots):

Image:
<img src="/library/Images/Insidebanner2.jpg" width="650" height="72" border="0" usemap="#InsideBanner2" alt="Penfield Library - SUNY Oswego">

Hotspots:
<area shape="rect" coords="467,45,556,62" href="http://www.oswego.edu/library/search.html" alt="Search This Site">
<area shape="rect" coords="581,22,641,42" href="http://www.oswego.edu/library/services/refdesk.html" alt="E- Mail a Question to the Information Desk">
<area shape="rect" coords="523,18,581,42" href="http://www.oswego.edu/library/SiteIndex.html" alt="Go to the Site Index">
<area shape="rect" coords="412,21,520,43" href="http://www.oswego.edu" alt="Go to the SUNY Oswego Home Page">

2. If an alt tag is too brief to adequately describe an image, use a longdesc tag, which links to another page with the long description:

<IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales97.html">

In sales97.html:
A chart showing how sales in 1997 progressed. The chart is a bar-chart showing percentage increases in sales by month. Sales in January were up 10% from December 1996, sales in February dropped 3%, ..

OR use a description link (a [D] will show up on your page next to the image):

<img src="97sales.gif" alt="Sales for 1997" longdesc="sales.html" ahref="sales.html" title="Description of 1997 sales figures">[D]</a>

3. Alternative text can be added by providing a link to a text-only equivalent page. Text-only equivalents are good choices for pages that cannot be made accessible with alt tags using the techniques above and for audio transcripts.

 Last Updated: 7/9/07