A previous article in this series discussed how to add alternative text to images using the alt attribute, or "alt text". However, the most difficult part of this process is deciding exactly what text to add. That is an art in itself. Here we try to explain just how to do it.
The purpose of alt text
The alt text you add will be spoken aloud to the blind by their screen readers. The intention is to explain to the blind what is in the image since they cannot see it themselves.
In fact we can go further. The aim should always be to tell the blind the same information that the image gives to people who can see it. So we first have to ask ourselves what information the image provides, then put that same information into the alt attribute.
Images are usually used to provide further information about the subject being discussed on the web page. This means that the same image can provide different information depending on where it is used. Let's take an actual example to explain that.
An example
Consider a photograph of a crashed car. It shows a smashed front wheel and suspension and bent wheel arch, and the broken windscreen pushed out where someone was clearly not wearing their seat belt.
If that image is used in an article about the dangers of not wearing seat belts, the wheel damage would be irrelevant to that subject. It would not be important to sighted people reading about seat belts, so do not mention it to blind people. The alt text here might be:
<img alt="Photograph of crashed car with the cracked windscreen bent out by several inches where a passenger not wearing their seat belt was thrown
forward.">
Now consider the same image displayed in an article teaching repair mechanics how to do crash repairs on mechanical parts. Here the window damage is not relevant, the image is there for the suspension and wheel damage. The alt text should reflect that, describing the damage the mechanics will have to repair in that case. It might say:
<img alt="Photograph showing accident damaged wheel and suspension.">
Next suppose the image is used on the website of a banger racing driver, showing the cars he has raced in. The car makes and models will be recognizable to other enthusiasts of that sport, so he doesn't bother to display any captions. But for screen reader users he must say what is in the picture, so he adds the make and model of each car into the alt attribute, and just a brief note about the damage. So he adds an alt attribute saying:
< alt="My red Ford Fiesta with the front wheel all smashed up!" >
Finally a financial services company has a page listing their services: mortgages, pensions, insurance, and loans. It shows a row of four images, with the name of the service and a descriptive paragraph under each one.
The insurance paragraph states "We provide business, home and motor cover", and they choose our image of a crashed car for that. These images don't add any information that isn't already in the paragraphs; they are purely decorative, to make the page look more attractive visually. The insurance image could just as easily have shown a fire damaged house. So leave the alt attributes on these images empty so screen readers will not announce them:
<img alt="">
Other points
Often small "thumbnail" images are used as links leading to larger versions of the same image on a different page. For sighted people the thumbnail is a brief indication of what lies beyond the link, so give it an alt text that does the same for the blind - just a few brief words to say what it is. The alt text of the enlarged image should usually give more detail.
Other things to remember are:
- Use normal punctuation so screen readers can pause slightly where needed for clarity, such as between sentences.
- Avoid abbreviations as they don't come over well in screen readers, unless it is a well known and pronounceable term like NATO.
- Do not use alt text to simply repeat the caption underneath an image, or to repeat other text on the page. Repetition is just annoying for blind people.
- And never place developer comments in the alt attribute. It is for blind screen reader users, not for internal use! Or SEO terms - SEO will benefit most from the meaningful text given to blind people.
- Never leave any image without an alt attribute at all, otherwise many screen readers announce the image file name, which is meaningless to blind people.
More information
Alternative text for blind people is so important a long series of examples is included in the HTML 5.1 specification itself: https://www.w3.org/TR/html51/semantics-embedded-content.html#alt-text . Another useful article on simple Informative images is at: https://www.w3.org/WAI/tutorials/images/informative/.
It is a complex subject. However you will not go far wrong if you always ask the question we mentioned above: "What information does this image tell the people who see it?", then put that in the alt attribute.
Leave a comment