The alt tag: SEO vs. accessibility

Table of content

1. So what is this alt attribute and why it's so important?
2. The alt attribute and SEO
3. The alt text and accessibility
4. Alt tag: SEO vs. accessibility. A Summary

In the beginning, I want to point out that you shouldn't treat this blog post as a guide. These are simply my thoughts on the subject ;)

So what is this alt attribute and why it's so important?

The alt attribute (often referred to as “alt tag” or “alt text”) is an attribute used on an image tag to shortly describe things the image is presenting. A browser displays this description when an image can't be loaded for some reason or the user views it on a screen reader.

The latter is the reason why the alt attribute was introduced in the first place: to make the web more accessible. But with the introduction of search engines, the role of alt text increased significantly. From then on, it started to be a meaningful factor of website positioning in SERPs. Although it's not the only factor search engines take into consideration, not the most important one even, it definitely plays a role.

So, in short, is it important? YES. And you should always add it to your images.

The alt attribute and SEO

As I mentioned above, the alt attribute is one of the factors search engines take under consideration when positioning a website in search results. As Google is still the most popular one, the introduction of Google Images increased the relevance of the alt tag as an SEO factor even more.

Google or any other search engine uses algorithms for indexing images (and other content of course). There is no human sitting at the desk, looking at images and indexing them. And even now these algorithms using AI and ML (Machine Learning) to determine what an image contains, are not perfect. To be honest, they are far from being perfect. This is why we should describe images on our website: to help index them correctly.

Alt text and accessibility

At the end of the first section of this blog post, I said that you should always use alts.

Yes, that’s true but we don't need to always add a description to it. We can sometimes leave it empty like this: alt="".

Why is that? Because not every image is important for users.

WCAG (Web Content Accessibility Guidelines) distinguishes five types of images: informative, decorative, functional, complex images, and images of text (text as image). I'll focus only on the first three as they are probably the most common ones.

• informative images carry information, for example, a phone icon next to the telephone number, images showing how to do something or which complement the text.
• functional images are used for example as icons in buttons or links (e.g. Facebook icon inside link tag instead of text "Facebook"),
• decorative images. As the name suggests, they are used only for decorative purposes and don't add any information or function. It can be an icon or image that makes a website more appealing for users but also an image presenting some information that is also presented in adjacent text.

Informative and functional images definitely need good alt descriptions as they carry information or have some kind of functional role. Therefore lack of description could significantly decrease user experience. So please, always add alt text to these.

What about decorative images?

They don't need alt descriptions. The best practice here is to put just an empty alt tag:

alt="".

You may ask "why should I leave it empty? I can put some nicely tailored text here and gain some extra SEO boost!". If you think like that, then please ask yourself if you like to watch commercials during your favorite tv show? I bet not ;)

And this is how someone using a screen reader could feel. Instead of getting only important information they also get the irrelevant white noise.

This is why decorative images are a place where you should put accessibility over SEO (in terms of adding alt text of course).

Alt tag: SEO vs. accessibility. A Summary

• both SEO and accessibility are important and you should care about them equally,
• every image should have an alt attribute,
• it's always good to add a description to it but it's sometimes even better to leave the alt tag blank.