Why and how to use the alt attribute
On July 18th, 1992 the first image was posted on the web. There's been a few more since then. But an incredibly high number of these images are not equally easy to see for everyone online.
I’ve taken it for granted that everybody knew that this can be fixed by using the alt attribute, but I realise that’s not the case.
What does the alt attribute do? #
The alt attribute defines an alternative text description of the image, and allows us to pass the WCAG success criteria for non-text content.
Why? Who doesn’t see images? #
The most obvious, and often least cared about, are screen readers. “We don’t have any blind users” is a fraise I dread hearing. If I don’t have the chance to argue the point, I just quietly include the alt attribute on all images on all projects I work on. That's all it takes – one attribute. And voilà! The site is considerably more accessible :)
Search engines also benefits from them, as they now get a textual description of the image, rather than relying on a dodgy AI to interpret it.
Non-graphical browsers are becoming more common among the sighted as well, though we don’t think of them as browsers. Voice Assistants as they’re commonly known as, such as Google Assistant, Apple Siri, Amazon Echo, and whatever your next car has installed might not display images, but should be able to describe them.
And last, but not least, the image might not load at all. This can happen for a number of reasons:
- The wrong URL was put in to start with. (CMS’ can be hard, ever seen a webpage with URLs pointing to
file:///?) - The image file has been moved on the server, but the
srcURL hasn’t been updated. - The visitor is abroad, and have blocked images from loading when data-roaming.
- A visitor loses internet connection just as the train drives into a tunnel, managing to download the markup in time, but not load images (nor JavaScript or CSS, but that’s another story).
How to fix it! #
<img src="file021477.jpg" alt="A black and white kitten sleeping in a cardboard box" />If I was to post an image of cute kitten, but not include the alt description, the browser will just show the “broken image” icon, like the following image shows.
But if I included a nice proper description, everybody can appreciate that there is a black and white kitten sleeping in a cardboard box.
Image concepts #
It gets a little bit tricky in terms of what to put in the description, as there are many different types of images. Here’s a short list covering the most common ones, I’ll cover them in more detail below.
- Informative images
- Decorative images
- Functional images
- Images of text
Informative images #
Images that displays concepts and information, such as illustrations, photos, and pictures. The alt text should convey the essential information in the image, like in the kitten example above.
Decorative images #
If an image is only decorative, set the attribute text to be empty
<img src="page-background-pattern.jpg" alt="" />You could also consider including the image with CSS as a background-image.
NB: Don’t leave out the alt attribute altogether if an image is used only for decorative purposes. The browser will assume an image without the attribute is an informative image.
Functional images #
Often images will be wrapped in a anchor link element (<a>) or a <button>. The text alternative sfor the function should then be used in the description. For example if a printer icon is used on a button to print the page, the text should read “Print”, rather than “A monotone icon of a printer”.
Images of text #
Sometimes text is presented within an image. If that is the case, the text alternative should be the same as the words in the image.
Takeaways #
The alt attribute should be included on all images.
It’s fine to leave an empty attribute value if the image is decorative. If the image adds information we must include a description.
Resources #
This post was originally posted on my dev.to feed.