But what is an image alt tag? Why is it important for ADA compliance and SEO? And how do you write a good one?
What is an Image Alt Tag?
From a techy standpoint, it is an HTML tag in the code for an image. On a practical level, it is information that describes an image.
There are a few different places that this information can be added. Here is one of the most easily accessible on WordPress: the Media Library.
What does an Image Alt Tag do for me?
An image alt tag is there in case, for whatever reason, an image does not show up on a website.
This used to be a more common occurrence with bad connections or really slow websites. Images would take too long to load, so sometimes you just saw words (AKA the image alt tag) instead.
With faster connections and better website design, there are two more common scenarios where the image alt tag is used : search engines (or other website crawls) and screen readers.
When a search engine, like Google, crawls your website, they don’t “see” an image the way people do. What they do see is the text behind that image, including the image alt tag. So all of that text goes into their search results (and affects your SEO!)
Screen readers are programs that are often used by people with disabilities that make browsing a website difficult – such as being sight-impaired. Often, people rely on these programs to navigate the web. When a screen reader reaches an image, most of the time it will read the alt tag text aloud as a descriptor for the image. When sites are not set up to be text-to-speech friendly, browsing can become frustrating, difficult, or just downright impossible.
What makes a good Image Alt Tag – keeping SEO and text to speech readers in mind?
Writing an Image Alt Tag (nonetheless hundreds of them!) that keeps all of this in mind can seem daunting. But it can be done, especially if you have a few guidelines.
(These are recommendations – not requirements or guarantees!)
Intent is key!
An alt tag should not only say what is in the photo, but should try to get across the same feeling and information that the picture does.
Let’s take this picture as an example:
A pure description of the image could be A man constructs a wooden structure that is lying on its side. This is factually accurate and what this actual image has set as an alt tag.
If this was a blog post about how to assemble a stand for a rain barrel, however, it may be more appropriate for the alt to say The in-process rain barrel stand has now been turned on its side in order to adjust the legs as necessary.
If it were a blog post about the construction expertise of the person in the picture it might read Kevin works on a rain barrel table built entirely out of leftover deck pieces.
These are three very different alt tags. Each one conveys the essential information that people need to get from the image. They also each contain different words that you may want to focus on for SEO.
An easy way to remember this is to imagine you are describing the image over the phone. What would you say?
No Keyword Dumps
People used to recommend filling your image alt tags with SEO keywords to try and boost your search ranking. While it is a good idea to use relevant keywords in your alt tags, it is not appropriate to have a list of all of your page’s keywords in your images. That would become frustrating and possibly unusable for someone using a screen reader.
No extra characters or descriptors
Most screen readers will read characters like slashes, parentheses, and dashes out loud. If they help convey the meaning of the alt, include them. If they don’t, leave them out.
Similarly, screen readers will generally announce that there is an image and then read the alt tag. There is no need to include language like “A picture of…” Unless, of course, it is a picture of a picture!
Text should not be an image
Okay, so this is more about how your images are set up, not your alt tags. But if someone needs to be able to read the text that is contained in an image to follow the page, it is better off as actual text on the page, not an image.
At the very least, that text should be transposed into the alt tag.
Decorative images – blank alt
If an image is purely decorative, it should have a blank alt tag. This could include things like borders or spacers.
If an image has a function – like a print icon or an image that links somewhere – its alt tag should describe that function. For a print icon, this might mean the alt tag text is Print this page rather than Printer. Linked images may be tagged with things like The Blog Fixer home.
How Can The Blog Fixer© Help?
The Image Alt Text Generator Fix helps you identify those images in your posts that need an image alt tag added. Our AI will suggest an alt tag for you to use and edit as needed.
(Disability compliance is a complex thing. This fix is designed to help you identify images where an alt tag may be needed. It does not guarantee compliance.)
As I said earlier, a lot of research went into these guidelines. Here are some of the sites we used. They have some great information if you want to dig in deeper.
Accessibility: Images, “Alt” tags, and the “Out Loud” Experience – Focuses on what different screen readers actual say and how to optimize for them.
When to use Alt Tags on Images – Describes different kinds of images and how to treat the alt tags for them.
Image ALT Text – Penn State’s Accessibility group looks at alts and how they should be used.
5 Common Mistakes People Make when Using Alt Tags and How to Avoid Them – Simple, clear reminders for writing Alt Tags.
How Many Words in ALT Text for Google? – More SEO-focused article about how Google treats alt tags.
WAVE -Web Accessibility Evaluation Tool – An incredibly in-depth analysis of web accessibility.