These two terms are often used interchangeably, but they are not the same thing. Let’s clear things up!
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 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 as a link to another resource, the alt text must describe the link destination.
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:
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.