What are the guidelines on ALT attribute for the IMG element?

How to make website images accessible for use with screen readers.
Include an accurate and equivalent alt attribute to provide a description for images on a web page

The most common image formats supported by the web are: GIF, JPG, and PNG. Image type best practices:
  • Photograph: use a JPG because it has the most color depth.
  • Icon that has clean, crisp colors and definition, use either GIF87a (non-interlaced) or GIF89a.
  • Image that allows the visitor to view it as it loads you would choose the Interlaced gif (GIF89a).
  • Irregular shape with sections that are invisible you would use a transparent GIF (GIF89a).
  • Animated images, use GIF89a.
  • Lossless image that is extensible and supports image depth beyond 256 colors, use PNG.

The alt attribute should typically:
  • Be accurate and equivalent in presenting the same content and function as presented by the image.
  • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate.
  • NOT be redundant or provide the exact same information as text within the context of the image.
  • NOT use the phrases "image of ..." or "graphic of ..." to describe the image.

Image types and alt text samples
  • The format for alt text is
    < img src="image.gif" alt="descriptive text" / > 

  • Decorative images may be given an empty or null alt attribute e.g.,

  • Images containing text, like a logo, should match the text in the image exactly e.g.,
    alt="Name, address, phone number" 

  • Charts, graphs, and other images which contain text: It's probably best to include a description of the chart within the webpage.

  • Images for navigation:
    alt="Download help document" 

Use a validator to verify that your code is accessible:


keywords: web accessibility, alt tag, alt attribute, alt text, alt tag