Why and how to use the alt attribute
Tags: a11y, alt, html
Published: 2019-04-17 10:04:04

---
title: Why and how to use the alt attribute
published: true
description: How to use the “alt” attribute to describe images in HTML
tags: a11y, alt, HTML, accessibility
cover_image: https://thepracticaldev.s3.amazonaws.com/i/bhcveqr1zadzvokp4r9u.jpg
---

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](https://www.w3.org/WAI/WCAG21/quickref/#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 <abbr title="Artificial Intelligence">AI</abbr> 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 `src` URL 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!

```html
<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](https://thepracticaldev.s3.amazonaws.com/i/m3lag2uecjfaq4cbk932.png)

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](https://thepracticaldev.s3.amazonaws.com/i/s2blqn2jhjbdvstis7eu.png)


### 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

```html
<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
* [W3C WAI image tutorial](https://www.w3.org/WAI/tutorials/images/)
* [MDN web docs: The Image Embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)
* [Les Horribles Cernettes](http://musiclub.web.cern.ch/MusiClub/bands/cernettes/press_info.html)