Blog

A Look at the Proper Usage 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 clients 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 instance, we often hear screams from the virtual mountaintop of “Use alternative text on your images!”. This is good and well-intentioned advice. Still, it’s also a bit vague.

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

These questions were inspired by a Twitter conversation I followed between designers and developers. It helped me realise that I’m not the only one out there who sometimes struggles with how to build websites that do right by users.

Today, we’ll attempt to clarify the proper usage of this vital attribute.

The Changing Role of Imagery

The way web designers utilize images has changed quite a bit over the years. In the early days of the web, imagery was used in ways we probably wouldn’t think of doing now. We put them to work as page titles, navigation systems and (gasp) even entire pages full of content.

For users that rely on screen readers or other assistive technologies, this could render a page unusable. In cases where vast portions of content were displayed as an image, even a simple alt attribute wasn’t going to be of much help.

Thankfully, some important lessons have been learned. The explosion of web typography has taken away any design-related reasons to misuse images as in the past. And as accessibility has come to the forefront, many now realize that images have specific roles to play.

The Importance of Alternative Text

It stands to reason that smarter use of images should result in better accessibility. While that holds true to a degree, we still have the ability to mess things up. This is where alternative text can come in and save the day – if it’s used correctly.

Remembering to use the alt attribute by itself doesn’t necessarily provide much benefit to users. For example, let’s say that we have a heading tag that reads “About Us”. Below that is a group photo of company employees. If we were to simply set the alt attribute to alt=“About Us”, it becomes redundant when read by assistive technologies. Thus, it doesn’t really tell users what the image is or what it means.

So, what should we use instead? A lot depends on the content of the page itself and the image’s role within. This, however, brings up another potential point of confusion.

Thankfully, the W3C has a helpful guide that breaks down images into different concepts:

• Informative
• Decorative
• Functional
• Images of text
• 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 for providing alternative text. If you’re still unsure, take a look at the alt Decision Tree for more guidance.

Not Always Necessary?

One of the most interesting tidbits of information in the W3C’s guide is that not all images need alt attributes.

But, wait a second. What about all of those calls to use alt every single time? Aren’t we ignoring accessibility?

It turns out that, in the case of decorative images (which don’t add any information to the page), the alt attribute becomes unnecessary. In these situations, providing alternative text can “add audible clutter to screen reader output”. So, much like a lack of whitespace can lead to a cluttered visual page layout, this extra bit of 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 as they read through a page. Even Google may send you annoying emails complaining that a particular image isn’t accessible in their view. This compels us to fill in the attribute, just to pass an automated test.

Therefore, it’s up to us to take these results with a grain of salt and, when necessary, explain the situation to clients. It so happens that an empty alt attribute can be beneficial under specific circumstances.

It’s About Helping Users

In doing a bit of research about how to use the alt attribute, I came to realize how often I’ve taken the wrong approach. I’d suspect that a lot of designers out there have done the same.

To some degree, it’s understandable. This attribute, while having been around for a long time, isn’t exactly exciting. It’s utilitarian and not always in the front of our minds.

Yet, for a great many users, it is vitally important. Consider that not everyone can easily see the images we integrate into a page. For these folks, the alt attribute is there to help bring context to the content they are consuming.

It’s something to keep in mind as we build an increasingly complex web.