A few tips on how and when to use the alt attribute:

  • Use the alt attribute for any image that is used as content. alt text describes the function of an image, and is rarely a detailed description of the image itself (unless, for example, the page is actually about a specific picture).
  • Make sure the description of the image is useful. For example, if the image is your logo your alt should be your company name and not “logo”.
  • Images that are links should describe where they go. For example, a logo that is a link to your home page should have alt="home page".
  • Don’t begin alt text with “photo of..” or “picture of..”; assistive technologies already do this. Redundancy and repetition are almost as bad as not enough information.
  • Don’t put line breaks in alt text. It causes suboptimal effects when read by screen readers.
  • Use an empty alt attribute for any image that is decorative or not necessary for understanding the content of the page (alt=""). If, for example, the information in a graph is explained in text below it, there’s no need to duplicate that in alt text.
  • Using an image file several times in a website doesn’t mean that the alt attribute has to be the same in each img tag. Because alt attribute change with context. For example, as seen above, a logo that is a link to your home page should have alt="home page" and the same logo, used somewhere else as decoration, should have alt="".

The alt attribute is meant to help users not miss any content, so make sure your text is helpful to anyone not seeing the image. These could be assistive technology users or users of a mobile with images turned off (to save data, for instance).