Alt tag is the name we tend to give to the HTML attribute that is added to an image. It looks like alt=""
Every image on your web page must have an alt tag. No ifs, no buts, no maybes. Not including it is a very basic – but easy to remedy – accessibility failure.
Alt-text (short for alternative text) is the text content inside the alt tag’s double quotes that describes the image. It has two main uses (and a helpful bonus):
- If the image does not load for some reason, such as a slow mobile network connection, the alt-text will still appear to let users know what they are missing
- For screen reader users, the alt-text is announced to them so they can understand the image’s meaning
- Images with alt-text descriptions become indexable by search engines.
If the image is purely decorative and completely irrelevant to the page content, or if the user can get the exact same information in the image from the surrounding text, you can leave the alt tag empty.
Most of the time you will want to provide alt-text, so then your decision is how best to describe the image for users.
If the image is being used inside a link or button without any additional text, the alt-text must explain the purpose of the image, i.e. what will happen when the link or button is activated.
In other situations, the aim of the alt-text is to provide a concise description of the essential aspects of the image. You may find the following framework helpful:
- Object (the main focus of the image)
- Action (what’s happening)
- Context (both the surrounding environment in the image and how the image is being used).
For example, a photo of a cat is going to have a different alt-text description depending on whether it’s your own pet in a blog post, or a page on a rehoming website, or a page about pet insurance.
Don’t include “Image: …” or “Image of …” in your alt-text. Users will be aware that it is an image, so this is redundant. And don’t use alt-text as an opportunity to cram in search keywords – Google is savvy to this!
Imagine reading the alt-text out to yourself as if you are visiting the page; if it makes sense then chances are you’ve written it well.
The W3C Web Accessibility Initiative has an alt decision tree that can help you decide how to use the alt tag.
Adding alt-text is often overlooked or forgotten when uploading website content. It is very easy to fix and will make a big difference to your users.