Description

In the event that the user can’t view the image—perhaps because he or she is accessing your page over a very slow connection, because an incorrect src attribute has been defined, or because the user is visually impaired and is accessing the content using a screen reader—the alt attribute provides alternative content that can be displayed instead of the image.

Value

This attribute takes as its value text that’s equivalent to the content or purpose of the image:

• For an image that conveys important information, describe the image.
• For an image that’s contained inside an a element, and is thus being used as a link, use an alt attribute that explains where the link goes, or what activating the link will do.
• For purely decorative images that offer no additional information to the page content, use an empty alt attribute:

  alt=""

  Don’t simply omit the alt attribute—it’s required, and absence of an alt attribute can cause problems for screen readers, which, in an effort to provide information about the image, may read out the image’s filename, for example.

• If an image is supplementary to the surrounding text, but isn’t purely decorative, don’t simply replicate the content from the surrounding text in the image’s alt attribute. In this instance, you should use an empty alt attribute.
• If the image is a graphic, for example a chart or graph, and if the pattern or process illustrated in the image is explained alongside or nearby in text, apply an empty alt attribute to the image.

Compatibility

It causes no compatibility issues, and has excellent support across all tested browsers.

Most browsers don’t display the content of the alt attribute unless the image is actually missing—it is, after all, supposed to be an alternative to the image. Internet Explorer, however, will display the value for the alt in the form of a tooltip when the user mouses over the img element in question. This isn’t the correct behavior, so be mindful of the fact that the other browsers are operating according to the specification, and it’s Internet Explorer’s interpretation that’s slightly wrong. If you do want to create a tooltip effect on an image, use the title attribute.

Note that Internet Explorer and Opera don’t deal with missing images very well, as Figure 1 shows (that screenshot was taken using IE6 on Windows XP).

Figure 1. Alternative text showing for a missing image in IE

Despite the fact that the image is absent, both of these browsers honor the height and width attributes of the missing image (if they’re set) and display a placeholder frame. If the alt text takes up more space than the image’s dimensions, neither shows the alternative text properly—it’s a little like looking through a letterbox. Safari is even worse, displaying a question mark where the image should appear, and no alternative text. Arguably the best of the bunch is Firefox, which doesn’t display a placeholder frame, and allows whatever space is required for the alternative text, making it a much more usable implementation.