Alternative text, most commonly referred to as alt-text, is text used to describe an image on a website. It is used mostly by blind or visually impaired people who use screen-readers to read the content of a website. When screen-readers get to an image, it will read the alt text out loud. Most people I talk to have no idea what alt text is. Most of the websites I have seen that were created by business owners, don’t include alt-text.
Alt-text examples
The best way to explain the importance of alt-text is to give you an example. Let’s use these two images of dogs as an example.
Acceptable alt-text (doing the bare minimum)
If you were a dog trainer and you had this picture of a German shepherd sitting down, you could give both images the alt-text of “Dog” and it would suffice because it is a picture of a dog. A person using a screen-reader on this website would hear “Image of a dog” twice. If you were to run an accessibility test using an accessibility testing tool, you would pass most tests. Some tools might give you a warning for using the same alt-text for various images.
Better alt-text
A better alt-text would be “German shepherd” for the first image and “Chihuahua dog” for the second image. This is a slightly better description of the image and would avoid duplicate alt-text.
Best alt-text
The best possible alt-text is very descriptive of the image. It should “draw” a picture in the reader’s mind. If I was writing a description for the first dog image above, I might write “Brown and Black German shepherd sitting attentively at the park”. A better writer might be able to succinctly add something about a grassy roadway and include text about a fall setting.
You may also want to add something related to your business in the alt-text that would make it more relevant to your business. If this was a dog you trained (and your business name was Acme Dog Training) then you could say something like “Acme trained Brown and Black German shepherd sitting attentively at the park”.
A visually impaired person on your website hearing these descriptions will likely stay on your website longer than if they just kept hearing “image of a dog” over and over again.
Do you always have to add alt-text?
No. If you add captions to your images, you don’t need to add alt-text. As long as the caption is descriptive of the image. If you have the same text for the caption as the alt-text, then the screen-reader may read the same thing twice.
Another time when you don’t need alt-text is when your background is an abstract image that has no significance. I have heard it said that in this scenario, you might still want to add an alt-text as “decorative”.
The worst kind of alt-text
The worst kind of alt text is meaningless text. I often see websites where a developer has programmatically made it so that alt-text gets added automatically from possibly the file name in an attempt to comply with ADA requirements. This makes it possible for the website to “pass” online tests but does not make the website accessible to someone using a screen-reader. Imagine an image with a file name “IMG_dfxvrspnmqrl56y” where the file name is inserted as the alt-text. Since the screen-reader cannot read it as a word, it will read each letter and character individually. Read this aloud to get a sense of how annoying it would be: “Image of I, m, g, underscore, d, f, x, v, r, s, p, n, m, q, r, l, 5, 6, y”. Do not make a visually impaired person’s life more difficult.
Help your image to be found
Make your site more robot friendly. Specifically the search engine robots such as Google or Bing. When you add alt-text, you give search engines the ability to know what the picture is and your picture can come up when people search images.
This is especially important if you have an ecommerce site. If you were selling this skirt for example, you could say “girl wearing skirt” and that could be good enough. You might even think that since people using screen-readers cannot see, they are not likely to buy a dress online. But the alt-text is also used by search engines to try to understand what a picture is about. So a better alt-text might say “model wearing a yellow summer style skirt”. Someone searching for a yellow skirt might see this image in the search results. Make sure your alt-text is relevant to the product or products you are trying to sell. In this image you wouldn’t want to go into details about the model’s hair color or the hill in the background.
Alt Text Length
They say a picture is worth a thousand words but you don’t have that much space. I have not found any information on any modern browsers having a hard maximum number of characters in the alt text. I have read several recommendations to keep the alt text to 125 characters max. A safer limit might be 100 characters. I often surpass that number. Most people don’t put any.
Quick tip: do not start alternative text by using the words “image of” or “picture of” or anything similar. When a screen-reader gets to an image it will automatically read aloud “image of”. So if you start your alt text with “image of…” the screen reader will say “image of image of…”.
Conclusion
Visually impaired people and people with other disabilities own dogs too and represent an underestimated part of the overall population. They probably use your product or service as well. You could be losing potential clients and putting yourself at risk of not complying with the Americans with Disabilities Act (ADA).
As we get older our bodies change. Even people who have been healthy and injury free most of their lives may develop a disability. As a friend of mine told me, we must build for our future selves.
Want to know more about alt-text? Read the in-depth post from WebAIM about alt-text.
Optimizing your images, adding alt-text, and making other changes on your website can be a tedious process. Please reach out to us if we can help you with your images or to optimize your website.