A look at the correct use of the alt attribute

By now, most of the web design industry knows the importance of accessibility. We talk about it incessantly and implore our customers to take it seriously. There is no denying the impact it has on the web and those who use it.

But sometimes the finer points get lost in the shuffle. For example, we often hear screams from the top of the virtual mountain of "Use alt text on your images!". This is good, well-meaning advice. However, it is also somewhat vague.

Although it is useful to know that the alt attribute can be useful in terms of accessibility, what we really need is the context. What is the right way to use them? Are there times when we shouldn't use them?

Today, we will attempt to clarify the correct use of this vital attribute. Let's begin!

The changing role of images

The way web designers use images has changed a bit over the years. In the early days of the web, imagery was used in ways you probably don't think of doing now. We put them to work as page titles, navigation systems and (jolt) even full pages full of content.

For users who rely on screen readers or other assistive technologies, this may render a page unusable. In cases where large portions of content were displayed as an image, even a simple alt attribute would not have been of much help.

Fortunately, some important lessons have been learned. The explosion of website design typography has taken away any design-related motive for abusing images as in the past. And since accessibility has become cutting edge, many now realize that images have specific roles to play.

The importance of alternative text

It is obvious that a more intelligent use of images should allow for better accessibility. Although this is true to some extent, we still have a chance to mess things up. This is where alternative text can enter and save the day, if used correctly.

Remembering to use the alt attribute alone does not necessarily provide users with many benefits. For example, suppose we have a header tag that reads "About Us" in a group photo of the company's employees. If we were to simply set the alt attribute to alt="Chi siamo", it becomes redundant when read by assistive technologies. Therefore, it doesn't actually tell users what the image is or what it means.

So what should we use instead? Much depends on the content of the page itself and the role of the image within. This, however, raises another potential point of confusion.

Luckily, the W3C has a useful guide that divides the images into several concepts:

• Information
• Decorative
• Functional
• Text images
• Complex
• Groups of images
• Image maps

The guide offers brief explanations of each concept, along with examples that can help you determine the most relevant path to providing alternative text. If you're still unsure, take a look at the alternative decision tree for more guidance.

Not always necessary?

One of the most interesting curiosities in the W3C guide is that not all images need alt attributes.

But wait a second. What about all those warnings to use alt every time? Aren't we ignoring accessibility?

It turns out that, in the case of decorative images (which do not add information to the page), the alt attribute becomes superfluous. In these situations, providing alternative text can "add sound clutter to the screen reader output". So just as the lack of whitespace can lead to a cluttered visual page layout, this little bit of extra text can do the same for those who rely on these tools.

What makes this difficult for web designers is that automated accessibility tools such as WAVE flag images without alternative text while reading a page. Google could also send you annoying emails complaining that a certain image is not accessible in their view. This forces us to fill in the attribute, only to pass an automated test.

Therefore, it is up to us to take these results with a grain of salt and, if necessary, explain the situation to customers. So it happens that an empty alt attribute can be useful in specific circumstances.

It's about helping users

By doing a bit of research on how to use the alt attribute, I came to understand how many times I have taken the wrong approach. I suspect that many designers have done the same.

To some extent, it is understandable. Although this attribute has been around for a long time, it is not exactly exciting. It is utilitarian and not always in the front of our minds.

However, for many users, it is vital. Bear in mind that not everyone can easily see the images we integrate into a page. For these people, the alt attribute is there to help give context to the content they are consuming.

It's something to keep in mind while building an increasingly complex network.

Digital communication consultant. I deal with Strategy and Digital Communication. Web & Digital Manager, SEO, eCommerce, Content, Social Media. Songwriter, Guitar Player, and then anyway I look at everything.