Guide to img alt texts

Our brain receives huge amounts of information every second, but only a fraction of it is processed and stored in our consciousness. As a result, the brain is constantly working overtime and often prioritises the "easy" information first. Visual elements - such as images - are quick for the brain to decode and therefore have a major impact on our understanding of what is presented on a website.

Images are important for conversion

The "right" images speak to our emotions, which we naturally want to respond to. Users can see and mirror themselves in what they see in the images - and that increases conversion.

Images used in the right context also help increase credibility, break up text and emphasise some kind of graphic line on a website. It's hard to imagine a website without the use of images!

But for the sake of example, try to imagine living without the ability to experience and understand the world through the sense of sight. Then try to navigate a website using only the tab key. It's an almost impossible task unless the website is designed with web accessibility in mind.

What is an img alt text?

An img alt text (alternative text) is a short text used in HTML code to describe an image. You may have come across the more technical terms for the alt text, which are "alt description" or "alt attribute".

This article is about img alt texts and how to use them to make your images accessible to users with visual impairments.

How to identify if an image has an alt attribute

An easy way to identify an alt attribute is to use the Google Developer Tool. Here's how to do it:

1. Open your website in a Google browser.
2. Right-click on an image and select "Examine".
3. This opens the developer tab with HTML code and CSS styling.
4. The piece of code that renders the image is marked with blue highlighting.
5. The code contains the file name of the image <img src="filename">.
6. If the alt attribute is defined, you will find it immediately after the file name <img src="filename" alt="text">.

Why should you use img alt texts?

There are several good reasons why we use img alt texts:

1. They increase web accessibility for visually impaired users by presenting an alternative, descriptive text.
2. If an image fails to load for some reason, the img alt text is displayed instead.
3. Search bots gain a better understanding of the relationship between image and text, which is important for indexing images.

The most important function of an img alt text is to increase web accessibility for users using screen readers. Screen readers read the content of a website aloud to users. Screen readers orientate themselves in the source code, and when they encounter an image that users with low vision cannot see for good reason, the alt text is read aloud instead.

Is using img alt texts important for SEO?

It's not just screen readers that use img alt texts to orientate themselves on website content. Search bots crawling a website also rely on the alt texts to understand what a specific page has to offer users. Therefore, correct and meaningful alt texts are also an important element in your SEO work. You can include a keyword in an img alt text as long as it doesn't interfere with the meaning.

To realise the benefits of alt texts, it's important that they provide meaning and value for visually impaired visitors to the website.

How to write the best img alt texts

There are obvious reasons to focus on the img alt texts on your website. Here we give you our top tips for working with the texts.

Decide what the purpose of the image is

Why have you chosen this specific image? Does it show a product or service, a customer situation, a graph or something else entirely? It could also be that the image has a purely decorative purpose, such as a background image, an element to divide two blocks of text or illustrate a button.

The purpose of the images has a big impact on your approach to working with alt texts. When talking about web accessibility, the purpose of images can generally be divided into these categories:

Informative images

Informative images are images that add value to the content. To put it another way: If the image is removed, the understanding of the content will be impaired. Alt-texts on informative images should make sense in the context of the rest of the text.

Images with text

Images with text are usually always a bad idea from a responsive point of view, as cropping occurs and the message can lose its meaning. However, if you do use images with text, it's a good idea to include the message in the alt text. If it's difficult to keep it short and sweet, you should explain the image in more depth in the text on the page.

Decorative images

Decorative images are images that do not provide dedicated useful information. If an image is purely decorative, you should not set an alt value (alt=""). Screen readers will ignore the image if the alt value is zero.

Functional images

If an image contains links, you should indicate in the alt text what happens when the link is followed. For example, a brand logo in the navigation of a website often has a link to the front page. The alt text could be: alt="go-to-brand-page".

What to avoid in the img alt text

Using phrases such as "image of" or "image shown" is completely unnecessary, as the assistive technology used by visually impaired people knows exactly what an img alt attribute is supposed to help the user with and announces the image format before reading the text.

If the alt attribute itself is missing, a screen reader will read the file name of the image, which in many cases confuses more than it explains.

Identify the important details in the image

It's important to find the right balance with the amount of information in the img alt text. If the image shows a person in a particularly good mood and it's important in the context, write in the alt text that the person is smiling or laughing, for example.

If the image compares two products, describe the difference in colour, size, etc.

Describe the image with the first words that come to mind

Your intuitive understanding of the image will often be a good place to start when formulating an alt text. Describe what's important in the image in a few sentences. For example, think about how you would describe the image to someone who can't see it?

Describe only what makes sense in terms of supporting the other content on the page. If you can't find that meaning, your image is probably decorative and the alt text should be left out.

Cut to the bone

In this phase, remove redundant words and replace long words with shorter ones. Feel free to use everyday language. Where the final alt text ends up depends largely on which category the image belongs to and what you've come up with in points 1 and 2.

Web accessibility is about more than just alt texts

Descriptive captions are just a small part of a comprehensive website accessibility programme. Some tasks can be done at the editor level, while others require access to the codebase.