Why, how and when to use ALT text in your website’s images

ALT text is used to describe an image’s content. It is inserted through the ALT attribute in the <img> tag. Besides aiding the user in different situations, such as a loading error in the image due to poor conexion or even a mistake in the image’s URL, it is also of the utmost importance for people with visual disabilities. Since it is through the image’s description that blind people can identify what the “graphic” (name given by screen readers to point out that in that place exists an image, even when the ALT in the <img> tag does not exist). 

That’s right! Even when we don’t add an ALT in our tag, people with visual impairments know that an image exists in the website’s content. However, they do not know what it refers to, which creates a very bad experience for the user.

What does ALT text have to do with Google ranking?

All right, we know that the ALT attribute is mandatory, indispensable, and that we should not even discuss whether or not to use it. Google also reads ALT and it helps a lot in the website’s indexing. So how can we work on the keywords to help with search engine optimization?

When a content is created focused on accessibility, we are already performing an optimization for the search engines. This is called SEO (Search Engine Optimization).

The first questions we need to ask ourselves are:

• Why does this image exist in this context?
• For what purpose does it appear for my user?
• What do I wish to transmit to my user with this image?

By answering these questions, if in one of them it is observed that the image is unnecessary, then do not use a <img> tag for this content. If your goal is merely illustrative, then in this case, replace the <img> tag for a background in CSS. This way you do not confuse the screen reader user by showing an image they do not need to recognize.

How to create a high quality ALT attribute

Now, if the image is a key for the content, try to make everything clear and objective. For example, a news website. In this website there is an article that tells about a NGO that helped a community in need with sweaters and food. This content has an image that shows people from the NGO delivering the donations for the community. In this case, we create an ALT with the following description: “NGO members deliver donations for community in need”.

The text must be simple and straightforward regarding what the picture is about. However, when the image has more than one goal, like using the keywords “New York” and “Greenpeace”, you can be more specific in your description. In this example, the word “New York” has the purpose of making Google index the news in this region. Meanwhile, the word “Greenpeace” is an NGO’s popular name, making it recognizable for the people in the area. What would we do in this case? The description could be: “Greenpeace “(NGO) delivers donations for community in need in New York”. 

In this case, the image’s description would be slightly larger. Though, it will not go off topic when describing what the image is about, besides being able to use the keywords properly. The only thing you need to be concerned with, is that it should be the briefest and most direct possible. It is not necessary to write another text explaining the entire image. Unless it is a painting and it is important to create a description explaining all the strokes in it. Then it is essential to have a longer description.

When to use the ALT text and when to use the title tag

Another important remark. Observe the example below:

<a href=”link” title=”Go to twitter (external link)” target=”_blank”><img src=”image” alt=”Twitter’s icon”></a>

In this case, we have the image of Twitter’s icon inside the <a> tag, which when clicked on sends it to an “external link”, in other words, another browser tab. This way, it is important to notify that we are being redirected to another tab, and in the example above, this notification is made in the title of the <a> tag with the used term: “external link”.

Remember: ALT must always be present in images that represent a page’s content. Title is a complementary attribute for some HTML tags and must be used only in cases where the link’s own content is not enough to describe it.

Try not to repeat information in the image that already exists in the text. Remember that in cases in which images have relevant details, such as graphics, maps or another kind of image with information on it, we must describe it more precisely. In this case it is fine for the ALT content to be larger.