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?
- It allows visually impaired users to use screen readers to interpret images and increases web page accessibility.
- Alt attributes are the text that is seen when images are unable to load.
- 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!
