The Rules of ALT

• Always use the ALT attribute in <IMG ...> and <AREA ...> tags, and in image type <INPUT ...> tags. There is no situation where you should not use ALT with these tags.

• If the image is purely decorative, i.e. if it has no informational value and is there only for the visual presentation of the page, then use ALT="". If the image is intended as a bullet, use ALT="*". If it is intended as a "horizontal rule" use ALT="----------".

• If the picture is a substitute for text, such as the name of a company in a logo, a picture of a signature, or a navigation aid such as an arrow pointing to the "home page", then put that information in ALT. So, for example, if the top of your page has a logo which reads "The Sarah Schoenfeld Company" then use ALT="The Sarah Schoenfeld Company". (It is also appropriate in this situation to put the logo image in an <H1 ...> element.) In these situations it is not desirable to describe the picture (e.g. "Logo of The Sarah Schoenfeld Company") because the important information about the picture (the name of the company) is already in the alternate text.

• If the image is in fact a picture of something which cannot be substituted for with text, provide a brief description of the contents, such as "picture of my dog Zoe". If the picture illustrates a concept, describe the concept, such as "College students in the 1980's wore their backpacks over one shoulder."

• If a lengthy description is needed to describe the image, use the LONGDESC attribute to point to the URL of another page which has the lengthy description. Because LONGDESC is not yet sufficiently supported, also follow the image with a "D-link". A D-link is a standard anchor link with contents consisting of the capital letter "D", like this:

  <A HREF="barchart.html">D</A>
  

• In image maps, all <AREA ...> tags should have ALT attributes. Many text and aural browsers can use this information to construct a non-graphical set of links. Unfortunately, this capability is not built into many browsers yet, particularly Netscape and MSIE with images auto-loading turned off. therefore it is still best to create a text based set of links below the image map. Done properly this will not detract from the appearance of the page.

• Do not use ASCII art, such as --> to create an arrow. If the picture is an arrow to indicate "next page", then use ALT="next page".

• A more complete set of rules can be found at Web Content Accessibility Guidelines 1.0.

Rollover Images >>>