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 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 Web Designer Toolbox Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more! 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: InformativeDecorativeFunctionalImages of textComplexGroups of imagesImage 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…
Like to keep reading?
This article first appeared on speckyboy.com. If you'd like to keep reading, follow the white rabbit.