Alt text is one of the simplest ways to make your website more accessible – but knowing what to write (or when to skip it) can be tricky. Here’s a practical guide to help you test your alt text and write it with intention.
Start by Deleting Title Attributes
Many sites still use title attributes on images. These aren’t helpful for accessibility and should be removed. Screen readers don’t reliably announce them, and they often duplicate or confuse the experience. Stick to using the alt attribute.
What Kind of Image Is It?
Functional images
If the image is a button or a link, the alt text should describe the action – like “Contact Us” if it leads to a contact page.
Informative images
Ask: What meaning would be lost if I removed this image?
If the image adds value that’s not already in the text, include that in the alt text.
Decorative images
If no meaning is lost by removing the image, leave the alt text empty. This includes background accents, filler images, or repeated visuals.
Context-sensitive images
The same image might need different alt text depending on how it’s used. For example, whether you describe a dog as “a German Shepherd” depends on whether that detail matters in the surrounding content.
Should It Be Alt Text or a Caption?
Alt text is meant to be short and only announced to screen readers. Captions are visible to everyone and can provide more detail. If you’re using a caption, the image itself should usually have empty alt text to avoid redundancy.
Captions work especially well in galleries or event recaps, where context like names or locations helps everyone.
What About Complex Images?
Charts, graphs, and infographics often need more than a sentence. Use brief alt text like “Bar chart showing data in Table 1,” and include a data table or long description elsewhere on the page.
You can also use aria-describedby for situations where both a short alt text and a longer explanation are needed.
Be Careful with Text in Images
Text should never be added to images just for styling. Logos are usually fine, but any important message or instruction should always be written in actual text – not embedded in an image.
The Key Takeaway
Effective alt text depends on the purpose of the image and the context in which it appears. Ask what the image adds to the content and whether someone using a screen reader needs to know that information.
Transcript
Welcome back to the Easy A11y Guide channel. In this video, I’ll be talking about how to test alt text on images and determine what it should or should not be.
The first thing I want to clear up is title attributes. I’ve seen a lot of websites that have title attributes on their images. These do not belong. Delete all of your title attributes.
Here’s an example of a wrong way to do it. Here we an image with a source, a title, and separate alt text. We want to get rid of that title and only use the appropriate alt text.
So the right way to do it is to have your image with your source and the appropriate alt text. Now we’re going to get into deciding what the alt text should be.
The first type of image is a functional image. This means that the image serves as a button or a link. In this case, the image must clearly say what action will happen. Here we have an example with an anchor tag going to a contact page, and the image has the alt text Contact Us, because that’s what happens when you click on the image.
After functional images, we need to determine what other image we have. It’s not a link, it’s not a button. Now we want to determine a appropriate alt text.
The easiest way to do that is to ask the question, what meaning is lost if you delete the image? Almost always, that is the answer for your alt text.
It’s important to note that alt text is context sensitive, which means that the same image may have different alt text depending upon its use.
For example, if I had a blog post and I already had 10 different pictures from a hiking trip. Probably several of them would have empty alt text. While they’re visually interesting and they add some spice to the blog post, many of them won’t actually be of importance.
If nothing is lost by completely deleting the image, then the alt text should be empty. That either looks like image source with a URL, alt Alt equals, or it could look like image source with a URL and just the three letters ALT. Either one is perfectly fine for a decorative image.
If you are using an image as a CSS background, then it needs to be decorative because there’s no way to apply alt text to a background image.
If the image is informative, then you want to ask the question, what meaning is lost by deleting it. In this case, this image in this context will say, Jen and Artemis at Patapsco River. We always want to avoid saying photo of or image of. A screen reader will already be reading out that it’s an image.
The part about this being context sensitive would be, is it important that the dog is listed as being a German Shepherd? Does it matter that we even mention that she’s a dog? It may or may not. It depends on the rest of the context on the page.
If this is a blog post and I’ve already been writing about Artemis and how she is a dog carrying the pack, helping me out on my trails, then it would not be important to list that she’s a dog in the alt text.
In other circumstances, we might be comparing different breeds of dog, in which case, including the breed would be really important.
Once you’ve decided that you’re going to have alt text, you want to decide whether it should be alt text or a caption. Alt text is intended to be short and sweet.
A caption can be longer, and a caption is also available for anyone looking at the image. I really love when captions are used on galleries because then I can see what each of the images in the gallery is for and why you added it.
For example, it might be a gallery of an event, and it’s important to attach the people’s names so that I can visually see those names and I can see who the people I actually met at the event are. When you’re using a caption, you will normally have empty alt text.
Here’s an example of a time where you might want to have a little bit of alt text and then a much longer description. Here I have an image source, and the alt text is a male peacock head. We have an aria described by and a description.
So this is going to be a paragraph, and this paragraph is going to be available to everyone because everyone is going to want the extra information about what is actually important in this image. The details about the crown on the peacock’s head, that is important, and you want to tell all of the visitors, regardless of whether or not they’re cited about that information.
Next, we have images of text. Text can be in photos. Text should not be arbitrarily put into images just because.
Here’s an example from the Maryland Text Connect website, and the logo is when text should be in a photo because it’s going to be special stylized text with an image. There’s some icons and graphics in the logo.
The second one is a yellow box, and they put important useful text into an image. That should be actual text and should not be an image.
The next is complex. These are charts, graphs, infographics, and similar types of things. The description for this needs to be available somewhere else.
There’s no way I can accurately describe this chart in just a sentence. I need a lot more room to explain the chart and write it out. Here, I would need to have a table created, and in that table, have all of the data available so that someone would be able to understand the content here, even if they couldn’t see the chart.
Here I have image, source, and the alt text is bar chart showing visitors data in table one. I would need to have a specific table labeled as table one to indicate that that’s the data that corresponds to this.
That is how you test for your images and their appropriate alt text.