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 had with a few fellow designers and developers. It helped me realize 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. Let’s get started!

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.

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.

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.