This isn’t just alt text; this is really great alt text

The first rule of web accessibility, at least if the Web Content Accessibility Guidelines (WCAG 1.0) are to be believed, is to provide an alternative text description for all non-text elements (that’s images, graphical links, bullets and buttons to you and I). At first glance this should be an easy thing to do. After all, how difficult can it be to describe an image in a few short words? Actually, there’s more to describing an image than meets the eye.The key to providing a great alternative (alt) text description, is understanding the purpose of the image. Once you’ve got that sorted, the rest is a piece of cake. Consider for a moment the fact that each image on a web page does something different. Some images evoke a sense of atmosphere, others will act as navigational markers, some are even intended to be invisible, so how on earth do you figure out what is appropriate and what isn’t? Besides, why bother with an alt text to begin with?Not everyone will be able to see the images on your web site clearly. Some people, those using a mobile phone to access the site for example, may have image loading turned off to save on the time it takes for the page to load in the browser. Some people have visual impairments which prevent from seeing images clearly or at all. Others may just have a hangover on a Sunday morning and find that all the bright colours in the graphics are giving them a headache, so they’ll stop the pictures from displaying.

For any of these people, an alt text will provide information about the image. A good alt text will let them know what the image is for and will help them appreciate the bigger picture of the web page. A bad or missing alt text means that anyone who can’t see the image will be utterly oblivious to any information it might contain.

Of course, if you don’t provide alt texts for all your images, no-one’s going to come and arrest you. The Alt Text Police are still a thing of a web accessibility fanatic’s lurid imagination. But you will be reducing the number of visitors to your web site. You’ll be actively telling people they can’t use your web site, access your information, buy your products, all because you’re missing some alternative text descriptions. You might want to think about that for a minute…

So how do you go about providing an alt text that’s accurate, appropriate and helpful?

The code goes a little something like this:

<img src="redBike.gif" alt="A red bike" />

The text that goes between the quote marks of the alt=”" part of the code is the alternative text description. Simple as that.

Images with Text

If the image contains a message, the alt text must be exactly the same. It’s all about conveying the same information, just in a different way. So, if your image says “Free Offer!”, then the alt text should be exactly the same.

Decorative or Spacer Images

Spacer images, a throwback to old web design techniques, are supposed to be invisible. If an image is supposed to be invisible to the eye, then you need to give it an ‘invisible’ alt text. This just means leaving the space between the quote marks of the alt attribute empty, like this:

<img src="spacer.gif" alt="" />

The same approach should be used for decorative images such as dividing bars, or graphics used to break up the page into interesting sections. These images are known as ‘eye candy’ because they have no practical purpose, they’re just there for decoration. You could describe each one for the benefit of people who can’t see them, but consider how much use someone will find a series of alt texts repeating the word “star”, when a series of asterisk images has been used to break up the page. It’s much more practical for all concerned if you use an empty, or null to use the jargon, alt text.

Logos

Here opinions differ, but not massively. You can either put the company name alone, for example “Microsoft”, or include the word logo too, “Microsoft logo”.

Bullet Images

If you’re going to include a bulleted list of items on your web page, then you need to think about using the right code to create a list properly. However, that’s another topic for another time and place. If you need to include a bullet image on your page, then use alt texts such as “bullet” or “item”.

Navigational Symbols

Here it’s important to describe the action that the image indicates. For example, if you have an image of an arrow pointing right, it probably points to the next page on the web site. The alt text “Arrow pointing right”, isn’t terribly helpful, but try something like this instead:

<img src="rightArrow.gif" alt="Next Page, Holiday Photos" />

Note that including the title of the next page helps people to know exactly where the arrow is pointing.

Graphical Links

Wherever the link points to should be described in the alt text. If the link leads to the home page, then the alt should be “Home Page”. Think of graphical links as signposts. If you don’t make it clear where the link goes, then people will get lost on your site.

Content Rich Images

Some images will contain a huge amount of information, blueprints or complex diagrams for example. For the most part you won’t be able to squeeze a suitable description into an alt text, so you can put a plain old text link code to the image which leads to a page where you can take the time and space to describe the image properly. A clear text for the link would be something along the lines of “Detailed description of the engineering blueprint”.

So there you have it. Providing great alternative texts is a two step process.

1. Decide the purpose of the image.
2. Describe that purpose in the alt text.

Meeting the first rule of web accessibility isn’t rocket science. Of course it’s not, we’re web developers and content editors not NASA scientists. But even so this is something that everyone can do to improve the accessibility of our web sites. Besides, you never know when that hangover will strike and then all that will stand between you and total oblivion will be a really great alt text.