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

• Those thatprovide information, such as the image that accompanies the news in a newspaper.
• Those that fulfill apurely decorative function, such as a calendar icon next to a datepicker

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

If we choose not to add thealt 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 likeimage-header.jpg, which does not provide any information.

Decorative images

The theory says thatthe 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 thebackground-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 thestyle attribute. It is not optimal when mixing presentation and content, but it is still valid:

<buttonico-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 thealt 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 includingalt 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, soit 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 thealt 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 goodalt 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 asImage 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, thealt 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 theW3C-WAI page.

A special case are images that, by their very nature, have so much information that it is impossible to summarize it in analt 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, theAlt Decision Tree.