How to write good Alt text

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.

Can we help?