Use alt attributes appropriately on all images

The Challenge
People who are blind typically use screen readers or Braille devices that "read" the text on Web pages. When these devices encounter a non-text element that has no "alt" text associated with it, the user has no way of knowing what the element represents, or if it is important to the content of the page. Provide text descriptions of the non-text elements on a page in order to communicate the meaning of the element to the user. Adding alternative text to non-text elements also supports people who use talking browsers, text browsers, or browsers on small devices.

Non-text elements are usually images (as defined using the <img> tag), but also include graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.

Solutions

  • Add textual alternatives using the alt attribute: 
    <img src="uc_logo.jpg" width="150" height="150" alt="Seal of the University of California">
  • Keep the alternative text description short — less than one hundred characters. When that does not suffice to convey the meaning, using the longdesc attribute to provide additional information in a separate html page linked to the element: 
    <img src="uc_logo.jpg" width="150" height="150" alt="Seal of the University of California" longdesc="story_of_the_seal.html">
  • If a non-text element is merely decorative or does not convey meaningful information, assign it the "null" alt attribute. This is alt ="", where the quote marks have nothing between them: 
    <img src="spacer.gif" height="1" width="10" alt="">.
  • Provide alternative text for both the main image and the hot spots of image maps.
  • Do not repeat an image's alternative text in the adjacent text, such as captions.
  • Do not put important images in the background of your Web page.
  • Test the pages for appropriate alt attribute usage by disabling images in your browser or using a text-only browser.