Alternative Text for Images

Alternative text is of critical importance to screen readers since they cannot visually see the image. The alt text should describe the function of the image or of the link if that is the only content in the link. Search engines also use this content so by skipping it, we're missing an opportunity to increase our page ranking for appropriate keywords as well.

If the image is purely decorative

If you could delete the image and lose nothing from the meaning of the page for the customer, the image is only there for decoration, then the alt text value should be null - no space or anything between the quotes. The alt attribute should still be included as it is required for valid HTML. Some screen readers will also announce "graphic" if it is missing rather than silently skipping over it when it exists with a null value.

Example:

• Fail:
  <img src="/path/to/image/tracking-pixel.gif" />
• Success:
  <img src="/path/to/image/tracking-pixel.gif" alt="" />

If the image is mostly text or is contained in a link with no other content

A functional description of the image should be in the alt text, not a visual description of what is contained in the image.

Example:

• Epic Fail:
  <a href="/someurl.aspx">
      <img src="/path/to/image/shipping-banner.gif" alt="" />
  </a>
• Fail:
  <a href="/someurl.aspx">
      <img src="/path/to/image/shipping-banner.gif" alt="Free Shipping on orders of $49 or more." />
  </a>
• Success:
  <a href="/someurl.aspx">
      <img src="/path/to/image/shipping-banner.gif" alt="Today only. Free Shipping on orders of $49 or more. Ends tonight, December 7 at 11:59 pm Pacific Time. Exclusions apply. See details." />
  </a>

If the image is content, not purely decorative, and if the image is generally photographic without text

If the primary purpose of the image is to show a visual representation of something, a description of what is being displayed should be included. This might be as simple as including the name of the products featured in it but could extend beyond this. Screen readers announce it is an image so do not say it is a photo of something. These types of images are less common on our sites.

Example:

• Fail:
  <img src="/path/to/image/supercategory-furniture.jpg" alt="Photograph of furniture." />
• The Bare Minimum:
  <img src="/path/to/image/supercategory-furniture.jpg" alt="Dining Room Table and Chairs" />
• Better:
  <img src="/path/to/image/supercategory-furniture.jpg" alt="Monarch 76 inch Dining Table shown in walnut wood paired with Sasha Upholstered Dining Chairs shown in Tumble Drift fabric." />

Frequently Asked Questions

Q. "But, do we really have to?"
A. Yes. Yes, you do.

Q. "But..."
A. See previous question and answer.

Q. "What's the best alt text for...?"
A. The Front-End Devs can help you sort out the best alt text for situations you are unsure about. The SEO Team may have suggestions as well.