We have recently relocated to Mission Viejo, CA

Return to Resources

Importance of ALT Text on your website

Written by Erick Olivares

ALT text is defined as alternative text or alt attributes. Alternative text is used as descriptions for images on an HTML document.

Why is ALT text important?

  1. It allows visually impaired users to use screen readers to interpret images and increases web page accessibility.
  2. Alt attributes are the text that is seen when images are unable to load.
  3. Alt tags allow search engine crawlers to identify images context, helping them to index an image properly.

Writing ALT text

When writing alt text its best to be as descriptive as possible and be below 125 characters.

  • Using adjectives and verbs to describe images provide a better web experience than having short, misleading descriptions.
  • If you think you can include a certain keyword found on the page, that would increase the page SEO, but only do so if the content on the image is relevant.
  • Don’t include “image of,” “picture of,” etc. in your alt text, it’s already implied that the HTML element is an image.
  • The most popular screen readers cut off alt text at around 125 characters, so it’s advisable to keep it to that character count or less.

Example

This is an image of downtown Dubai, below are different ways of describing the image. The best one is the most descriptive one.

Basic Description

city highway surrounded

Better Description

city highway surrounded by high-rise buildings

Best Description

aerial photo of city highway surrounded by high-rise buildings

Adding ALT text on your website

HTML

In HTML, add the alt tag to your image tag.

<img src="skyscraper.png" alt="aerial photo of city highway surrounded by high-rise buildings">

WordPress

On WordPress, it is very easy to add ALT text. Under the media link in the admin dashboard, you will find all your images. Once you click on the image you will see an alternative text meta field on the right-hand sidebar.

Shopify

Shopify doesn’t have built-in alt tags, however, there is a paid app for this!

Shopify Alt Text

Subscribe to receive resource updates to your inbox.

Resources