What is ALT (alternative) Text?

Alt Text is used for screen-readers to provide a description of the image that is being displayed to your website visitor.

The point being that for those that cannot see / rely on assistive technology still have a great experience on your website.

Other benefits of this are it's also good for Search Engine Optimisation (SEO) as it helps to provide context for computers for the image.

Why ecommerce websites are different.

While alt text is used to describe an image that is being displayed, for ecommerce sites this is providing additional context that is visible in the image.

In essence you are showing a picture of a product so put in a meaningful alt text related to the product.

This will help those that rely on assistive technology to make decisions on whether or not the product is for them.

Example:

Let us imagine you're selling clothing online.

I click on your product page and it's a pair of mittens with no custom choices. 

Your page will probably look have an image  alt text is "knitted mittens" with a product description.

In the product description you write something like the below.

"Slip into our wonderful knitted mittens perfect for those cold frosty commutes to the office.

Size: Adult one size fits all"

You should have some idea of the webpage now.

Have I sold you on those mittens?

The answer is probably not, the reason for this is probably very simple.

• What colour are the mittens?
• Are they multi-coloured?
• if so how are they multi-coloured?
• Are they black and white?
• if so is it 50% black 50% white?
• Is the top half of the mittens black and bottom half white?
• Are they mittens that can turn into fingerless gloves?

Without the alt text and product description combination it is highly possible that those that rely on assistive technology may not be certain if what you are selling matches what they are trying to buy.

Some ideas to keep in mind:

• Don't duplicate the product description.
• Describe the product.
• Is it limited edition?
• Using the above example size is in the product description so I won't add it to the alt text
• Add the colour of the product to the alt text (if only a single colour is offered)
• What is the brand?
• What material is it?
• How does that feel?
• Be concise try to keep the alt text to less than 20 / 15 words, we're not writing essays either.

Recap:

• Be consistent with your alt text
• Try to describe your product on a high level 

• Ask yourself if based on the product description and alt text alone, would you buy your product?

  Writing alt text is a skill and will take time.