The Rules of ALT

The "Rules of ALT" is a short set of guidelines for how to use alternate text in your images. These rules will help make your images -- and your site as a whole -- more effective.
  • 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 http://www.w3.org/TR/WD-WAI-PAGEAUTH/




About the Author
Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License. Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.