Alt attributes

Alt attributes are used to provide alternate text for non-textural HTML elements, most commonly on img elements. Generally their use is quite straight forward, but it is important that the attribute value you use is appropriate to the situation. In this post I’m going to talk about a few different use cases.

Let’s start the W3C description from the HTML 4.01 specification:

Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don’t support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.

The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.

While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:

• Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt=”red ball” would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (“”). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.
• Do not specify meaningless alternate text (e.g., “dummy text”). Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.
  play terminals, users whose browsers don’t support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.

So in HTML 4.01 an image always requires an alt attribute, but sometimes the appropriate value may be nothing at all if the image is purely decorative, a delimiter between links which are already in a list for example. Ideally these should be moved to our presentation layer, CSS, but in the real world it is not always possible to avoid having some decorative images in markup.

Some images repeat content which is available in another form. Let me give you an example:

My dog is called Milly. She is a Cavalier King Charles Spaniel, black and brown in colour,
with a white stripe on her chin.
<img src="http://farm4.static.flickr.com/3200/2730900277_54aa8dbeda_m.jpg" width="240" height="180"
alt="Milly has a white stripe on her chin">

In this example I have described Milly and provided an image to draw attention to one of her features, a small white stripe on her chin. Both the text and the image alt attribute make reference to the stripe, but remember that alt attributes are a replacement for images, so all we are doing is repeating what has already been said. There are no circumstances that I can think of where you would deliberately write ‘..with a white stripe on her chin. Milly has a white stripe on her chin.’

Let’s try this again:

My dog is called Milly. She is a Cavalier King Charles Spaniel, black and brown in colour,
with a white stripe on her chin.
<img src="http://farm4.static.flickr.com/3200/2730900277_54aa8dbeda_m.jpg" width="240" height="180"
alt="">

There is no need to have anything other than an empty alt attribute value as the meaning of the image is conveyed in the associated text. Without the text the image doesn’t make it clear what point I am trying to make – it is only a small white stripe after all. With the image sighted users will get additional information that is difficult to convey in words alone. It is advisable to write text which describes important images in this way rather than including the content in alt attributes so that all users benefit from the description and can easily read what you point you are making even if it is not immediately obvious to them from the image.

There is a different rule for images which are the only content of a link. Links must contain textual content, so an image on its own inside a link must have an alt attribute value. In these cases both the image and the alt attribute text should describe the target of the link.

Let’s try this one more time:

My dog is called Milly. She is a Cavalier King Charles Spaniel, black and brown in colour,
with a white stripe on her chin.
<a hef="http://www.flickr.com/photos/ipouncey/2730900277/sizes/l/">
<img src="http://farm4.static.flickr.com/3200/2730900277_54aa8dbeda_m.jpg" width="240" height="180"
alt="Larger image of Milly"></a>

Here the img links to a larger version of the same image and so we write alt attribute text to explain this. The main text still describes the image so all users will understand the purpose of displaying the image, and the content of the image (a picture of Milly) suggests what the link points to. If for some reason the image is not displayed, or the user uses screen reader software, the link will still make sense.

As for the other elements which allow alt attributes you can follow the same rules – treat area elements and input elements of type=image as you would an image which is the only content of a link, and applet elements as a regular img element.

Although these guidelines seem simple, correctly describing content can make a substantial difference to usability and accessibility so it is worth spending a little time to decide on the most appropriate text for alt attributes.