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.

If Internet Explorer’s insistence on displying the contents of the alt attribute when you hover over an image that is very much present and correct is causing a problem, you may add an empty title attribute to the img tag, e.g. alt=”Picture of a house” title="" which will stop it rendering the alt text.

Note that Internet Explorer and Opera deal with missing images differently to the way that other browsers tested do with regards image dimensions. Figure 1 shows a screenshot taken using IE6 on Windows XP.

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

In IE and Opera, both of these browsers honor the height and width attributes of the missing image (if they’ve been set) and display a placeholder frame around that space. If the alt text takes up more space than the missing image’s dimensions allow, neither browser shows the alternative text properly—it’s a little like looking through a letterbox, with the overflowing content hidden from view. If the dimensions are not specified, IE and Opera will render all the alt text content with no issues (along with the bounding placeholder frame). Safari will render the alternative text unless the amount of text exceeds the dimensions of the missing image, in which case it simply displays a question mark where the image should appear. Arguably the best of the bunch—although it is largely a matter of taste—is Firefox, which doesn’t display a placeholder frame, and allows whatever space is required for the alternative text. This may make the alternative text legible but may be at the expense of other layout issues that arise from the space allocated to the image collapsing down.

The Paciello Group has tested browsers’ ability to handle alt attributes alongside the title attribute, and provided a series of screen shots demonstrating the effect of each scenario.