Skip to: content, navigation

alt (HTML attribute)

Spec
Depr. Version
No HTML 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

alt="string"

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.

Example

The alt attribute clearly explains what the image contains:

<img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina" />

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

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

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 Missing image submit button showing the alternative text

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.

User-contributed notes

ID:
#1
Contributed:
by AutisticCuckoo
Date:
Fri, 28 Mar 2008 12:21:10 GMT

Whether or not the specified dimensions should be honoured if the image is unavailable is a matter of taste. The way IE and Opera do it prevents the layout from breaking if it relies on image dimensions, while the Firefox way ensures that the whole text is readable.

The IE/Opera way allows designers to eat the cake and have it too, since they can simply omit the dimensions to achieve the Firefox behaviour.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

Search