Accessibility Matters - Exploring the Hows and Whens of Alternative Text

The most frustrating part of accessing the web as a blind user, in my opinion, is images. Whether they're infographics or pictures used to add a visual element to an article, the vast majority are poorly labelled. In most instances it comes down to a lack of knowledge about how and under what conditions an image should be described. I hope to share some perspective on this today.

Firstly, I'll reiterate why alternative text is so important. Of course, it helps me as a screen reader user to understand what your image is about. It also helps those who have turned off images to allow for faster load times with less bandwidth, or those with text-only browsers.But as my boss Andrew wisely says, "The ultimate sightless user is Google". If Google doesn't know what your image is, you risk lower rankings in search results.

Contrary to my initial understanding, an image need not be described only through the use of the Alt attribute. I had falsely assumed that "alt text" as it is so often called, simply referred to text within this attribute. It actually stands for "alternative text" and can mean either text within the alt attribute, or text that is in the immediate surroundings of that image.The alt attribute must still be present to fulfill HTML 5 standards, but it could be empty in the latter case.

The question is, of course, when should one method be used over another? And, how much description is enough?

The answers to these depend on an image's context and function.

If an image adds content to the text it accompanies, a description is definitely required. A picture of the subject of an article, an image depicting a process its corresponding text gives in words, or an infographic are all examples. The main idea here is to provide description for any images that would cause a person to miss some of your message if left undescribed.

I was remiss about another point relating to alternative text. In a prior post, I stated this text could not be navigated on a word-by-word basis, but was rather read in its entirety. As a result, I suggested that would seem to indicate that shorter Alt tags would be better. However, I've since discovered that this is not true: in all screen readers and in all browsers, alternative text may be read by word or character. While brevity is advisable, it does make the addition of longer or more complex descriptions possible.

An image's function is also a determinant of its need for description. A company logo simply requires the company name be in the alt attribute, as knowing that this is a logo, or what your logo looks like doesn't add to the image's function, which is to represent your company visually. An arrow icon to move to a next or prior page doesn't require "blue arrow" as alternative text, but rather "next" or "previous". These, after all, are the functions of these arrows. Presenting a file for download doesn't require you have "pdf icon" in alternative text, but it does necessitate link or alternative text stating specifically that this is a link to download a pdf file. "Download our Q3 earnings" as link text, with "pdf" as alternative text for the pdf icon would be ideal.

Decorative images that add visual appeal but no content to a page can either have empty alt attributes, or be added as background images using css. However, images added this way that do add content should have descriptions provided somewhere on a webpage.

It is important to remember that alternative text should not contain information that someone who could see the image wouldn't have access to. An image of an echidna that is a link to its Wikipedia page, for instance, shouldn't have "Echidna Wikipedia page" as an alt attribute, as this is extra information someone looking at the echidna's picture wouldn't have. "Echidna' would suffice here.

As I mentioned earlier, the alt attribute may be left empty (appearing as 'alt=""') in the case that descriptive text is provided next to the image. This would be most realistic in the instance where an image's characteristics aren't crucial. For instance, a picture of an echidna whose only defining feature was that it was an echidna might only require "echidna" to be written next to it and an empty alt attribute. A professorial echidna, on the other hand, would require "professorial echidna" in the alt attribute and perhaps an explanation for its professorial demeanor in adjacent text.

The only exception to the empty alt attribute rule is if the image has an additional function. In this instance, irrespective of the surrounding text and any redundancies caused, the image's function must be placed in the alt attribute. In our echidna Wikipedia page example above, "echidna" would need to be written in the alt attribute even if "echidna" was also written in text adjacent to the image.

The final point regarding alternative text is the amount of description required. Strictly speaking, description is only required insofar as it provides information about an image's function. However, the same image might have different functions in different contexts. Take a painting, for example. Its description would be different if it were there to demonstrate painting techniques than if it were to accompany a historical account of the scene it depicts. In the former case, the finer details of the painting are less important compared to the brush strokes used; in the latter, more emphasis should be placed on the story the painting tells.

This point is a matter of personal preference. I am always partial to more description than less: I want to know exactly what something looks like so I can imagine it. However, I concede this isn't always necessary or practical.

Alternative text may appear daunting, but it doesn't have to be. The main questions to ask yourself would be: "what does this image do for my site?" and "why is that important?" If you can answer those questions, you're well on your way to mastering the art of alternative text.