Alt Text for Images on Ecommerce Sites

Person holding a credit card and preparing to shop online.

Alternative text refers to text that describes non-text content in web pages such as images. Using either the alt attribute or the surrounding content of the preexisting text, alt text serves to “translate” aspects of web pages that are not already in a text form. This is incredibly important when considering the accessibility of eCommerce websites.

Visually impaired internet users rely on alt text for images to tell them what the image is meant to represent. Because screen readers and other applications aren’t advanced enough to describe images, we have to manually input the descriptions. Without alt text for images you lose out on a sale because the user simply didn’t know what product you were selling.

This is also beneficial when users have chosen not to see images or have issue loading images; they will be presented with the alt text instead. The alt text for the image could be what persuades them to choose to see the image or decide that loading the image is worth it.

Likewise, this can also boost your search results when looking into SEO (search engine optimization). Alt text for images can contain keywords or phrases that could help direct search traffic to your product. 

HOW TO USE

There are several ways to optimize your usage of alt text to both increase accessibility and market range for your eCommerce site. 

  1. Describe the Content of the Image
    The most important part of choosing the alt text for your images is to ensure they actually describe the image. While naming your files Image 1 might be useful as a personal organizational tool, it’s useless for users who rely on alt text for images and image description. If a user doesn’t know what you’re selling, they won’t purchase from you. If you’re selling a shoe, a good start for your alt text would be the shoe’s name brand followed by the product type. 
  2. Describe the Purpose of the Image
    Aside from simply describing the content, you have to consider the purpose the image serves. For a product like a shoe, this is can be redundant. But if you’re selling a product with a less intuitive purpose or a product with multiple functionalities, it can be useful to include some form of description of these purposes. If you’re selling a back scratcher, the initial purpose is clear, but it doesn’t elaborate on features that could make it unique such as being retractable. 
  3. Be Succinct
    It can be tempting to stuff the alt text for images with buzzwords that will increase your SEO traffic. While this is an added benefit of using alt text, it is not the function’s main purpose. Over worded alt text will just confuse the users its meant for and won’t help them identify the product or service advertised. “Women’s black and white athletic shoe” will always be preferable to inserting every possible descriptor that might apply to the image. 
  4. Consider the Image’s Context
    The text that surrounds the image is another determiner of what should be used as alt text. An exact copy of the text slapped on the image would just result in the same paragraph being read twice. If a t-shirt is description is located in the product page’s details, it would be redundant to rewrite all of that for the alt text of the t-shirt image. Trust that the user will understand that the t-shirt there is the same as the one being described and give just enough information to confirm this. 
  5. Use Null Alt Text for Decorative Images
    Not all images require alt text. Images that are simply used as decoration or organizational tools don’t need to be described. This is especially important to consider when utilizing alt text for images on your eCommerce site. Your users are looking for product images and descriptions, not a description of how the page is divided by using ribboned borders. 

For help in understanding how to use alt text for images or general web accessibility questions, contact MAB Accessibility today!