Non spacer IMG with valid ALT  
Section 508 1194.22(a); WAI / WCAG 1.0 checkpoint 1.1
 
 
Issue Description

Images included in this document do not have corresponding valid textual descriptions. A valid description is a string value of the ALT attribute that:

  • is not the empty string ("")
  • is not a string with 1 or more spaces (" ")
  • is not the name of the file containing the image
  • does not only say which is the size of the image file
  • is not longer than 150 characters (this is actually only a suggestion: it is not required by WCAG 1.0 nor 508 standard)

The image appears to have more than a decorative role (i.e., it is not a spacer).

 
 
How to fix

Add the ALT attribute to the IMG tag. Remember the following points:

  • The description should explain the role of the image on the page. Imagine listening over the phone to the page content and the image description
  • If the image is used as the content of a link and you provide link text too, use a space as the ALT attribute value of the IMG element. In such a case, link text should be the alternative description for the image
  • Be brief. Consider that images like logos are repeated on every page of the site, and people would have to listen to the same description over and over
  • As a rough guideline, for buttons use the same text shown by the image
  • ALT descriptions are not interpreted by browsers, and should not include HTML tags. Embedded tags can only confuse users and possibly search engines too
  • ALT descriptions that are too long may be truncated by browsers and increase the time required to download the page. A good guideline is to use less than 10 words and 64 characters
  • Images used solely for decorative purposes (such as spacers) should include an empty ALT string ("") so that screen-readers ignore them. The same is true for images like bullets
  • BEWARE: The ALT attribute should be the empty string ("") in cases where the image is already described by surrounding text
  • BEWARE: All images included in links (including transparent GIFs) need to have valid ALTs describing the link destination
 
 
Issue Explanation

The ALT attribute describes the associated image so that users without graphics-enabled browsers can still effectively navigate the page. The advent of hand-held, text-only browsers makes the use of the ALT descriptions more important now than ever.

For hidden links (normal A tags whose label is a spacer), it is important that the ALT attribute of the image exists and describes the destination of the link. (Hidden links is a technique you can use to fulfill the 508 rule 1194.22(o) stating "A method shall be provided that permits users to skip repetitive navigation links," and the WAI checkpoint 13.6.)

ALT descriptions are displayed before the associated image, which is helpful when image download and display takes several seconds.

Adding keywords to the ALT attribute can also improve the page listing in some search engine.

For images that play only a decorative role in the page (like spacers and bullets), it is recommended that you define an empty ALT (i.e. ALT="" ) so that speaking browsers do not confuse your users to say things like "*" or ">".