18 May A Look at the Proper Usage of the alt Attribute May 18, 2020 Accessibility, General, Trends, Web Design Accessibility, Web Design 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. Related Posts These Are a Few of My Least Favorite Things After 10+ years in the web design and development industry, I’ve found that the web is still far from perfect. There are a number of things I’d love to see change for the better. So, today I’m wearing my “Grumpy Designer” cap once again. It will put me in the proper frame of mind as I take you through some things that I’d like to see either evolve or just go away. The Biggest Designer Debates It seems like every industry has their own set of fiercely debated topics. They pit tool against tool, theory against theory and can be great fun (or infuriating, depending upon your perspective). But since web designers spend an inordinate amount of their lives online, our debates tend to stir a whole lot of both participation and passion. Today, we’re going to look at some of the subjects of debate that have taken on a life of their own. Some are completely organic to the industry, while others have been adapted from society at large. Regardless, they have resulted in some epic arguments. What Is Application Shielding? Application shielding is mainly used to protect intellectual property and cut down on piracy; the techniques modify a service's application code, making it more difficult for someone to tamper with it, or to figure out how to remove digital rights locks and steal media like music or movie files. Can the Visually Impaired Access Your Site? When designing a website, it’s important to take all potential visitors into consideration. This includes the visually impaired – those afflicted with color blindness, low vision and even total blindness. The first thing to think about when improving the accessibility of your site for the visually impaired is the level of the impairment. Is your site suitable for users with color blindness, low vision, partial blindness and even total blindness? Fortunately, there are several online tools and software available that can help make your site more accessible. The WannaCry Security Legacy and What’s to Come Those who were hit by the WannaCry ransomware found themselves in great pains. Their systems and data had been encrypted on them, and they would remain encrypted, unless a demand for payment, typically $300 to $600 worth of bitcoin, was met. The Evolving Role of Social Media in Ecommerce Back in the old days, a business’s presence would be signified by advertisements in the paper and a physical storefront. Now, in the digital age, business reputations live and die by their social media standing. Right now, social media is used by brands as a way to advertise, increase their online presence, and deliver high-quality customer service. In 2017, we can expect those trends to continue, as some new ones emerge. Let’s take a look at the growing role of social media in ecommerce.