A11y tips: accesible images

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.

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.