Front-end development + UX + Accessibility

Why and how to use the alt attribute

Four women wearing 1990s gala dresses.
The first picture on the Web.

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:

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.

Broken image icon showing instead of missing image

But if I included a nice proper description, everybody can appreciate that there is a black and white kitten sleeping in a cardboard box.

Text description showing in stead of missing image

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 #

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.

← Home