A11y tips: accesible images
Tags: a11y, tips, html
Published: 2022-01-14 08:28:23

Depending on the function they fulfill, we can distinguish two types of images:

- Those that **provide information**, such as the image that accompanies the news in a newspaper.
- Those that fulfill a **purely decorative function**, such as a calendar icon next to a datepicker

When we insert an image in our HTML using the `<img>` tag we **always have to accompany it** with its `alt` attribute, so that screen readers have alternative content to announce when they reach it.

If we choose not to add the `alt` attribute, when the screen reader reaches the image, it will not know how to describe it and will try to do so by reading the name of the file, which could well be something like `image-header.jpg`, which does not provide any information.

## Decorative images

The theory says that **the content must be separated from the presentation**, that is, that an HTML must have meaning by itself without having to rely on CSS.

For this reason, images that do not fulfill any informative function, that is, that are for purely decorative reasons, should be included in the CSS using the `background-image` property.

Thus, in the example of the button that we mentioned, the most correct would be something like this:

```
.button-date {
   background-image: url("ico-calendar.svg");
}
```

Sometimes these images, due to integration needs, cannot be output to external CSS files, but they can still be included inline using the `style` attribute. It is not optimal when mixing presentation and content, but it is still valid:

```
<button style="background-image: url("ico-calendar.svg")>
  Pick date
</button>
```

And sometimes, for whatever reason, you have to include a decorative image using the `<img>` tag. It is something to avoid, but if needed it can be done by leaving the `alt` attribute empty, so that screen readers ignore the image by not adding it to the accessibility tree.

```
<img src="ico-calendar.svg" alt="" />
```

What is the difference between not including `alt` attribute or leaving it empty? If you do not include it, the screen reader does not know if you have forgotten to do it but the image is still important, so **it will try to offer an alternative content** in any way it can, and as we have commented before it will announce the name of the file. However, if you leave the `alt` attribute empty you are clearly saying "_hey, screen reader, I have not forgotten anything, this image is decorative and you do not have to advertise it, skip it_".

## Informative images

In this case we have to write a good `alt` attribute that describes the image and how? **Trying to be as brief and at the same time descriptive of the accompanying image**. It can come in handy to try to answer this question: _how would we tell the content of an image to someone who cannot see it so that they have reliable information but we do not bore them?_

Since the screen reader already announces previously that the `<img>` element is an image, it is not necessary to start the alt with texts such as `Image of` or similar, directly the descriptive text. For example:

```
<img
  src="dog.jpg"
  alt="Dog with a bell attached to its collar."
/>
```

If the image serves as a link, the `alt` attribute that we add will serve to give the link an accessible name that can be read by the screen reader.

More information on how to handle informational images can be found on the [W3C-WAI page](https://www.w3.org/WAI/tutorials/images/informative/).

A special case are images that, by their very nature, have so much information that it is impossible to summarize it in an `alt` attribute, such as diagrams, graphs, flow charts...

In these cases there are two alternatives to offer the alternative content:

- Describe the image using an HTML element located below the image, for example a `<figcaption>` if the image is inside a `<figure>`.
- Make a different page with the content of the infographic and add a link to it below the image, so that the screen reader user has easy access to discover its content.

A good consequence of both options is that in addition to improving accessibility, **SEO is also improved** by offering more easily indexable content as it is in text format.

## Still have questions?

In case you don't know how to act with an image or how to write the alt attribute, there is a very useful resource that the W3C-WAI offers, the [Alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/).