Skip to: content, navigation

by Ian Lloyd

alt (HTML attribute)

Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Full Full Full Full
Spec
Depr. Version
No HTML 2
alt="alternative text for image"

Example

The alt attribute clearly explains what the image contains:

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

Description

In the event that the user cannot view the image - perhaps because of a very slow connection, an incorrect src attribute, or even because the user is blind and is accessing the content using a screen reader - the alt attribute provides an alternative to the image that can be used instead. If the image is missing, the browser can display the text alternative instead.

Value

Text that is equivalent to the content or purpose of the image:

  • For images that convey important information, describe the image
  • For images that are contained inside an a element (and thus are being used as link), use an alt attribute that explains where the link goes/what activating the link will do
  • For decorative images that offer no useful additional information to the other content, use an empty alt attribute:
    alt=""
    (Do not simply omit the alt attribute - it is required, and absence of an alt attribute can cause big problems for screen reader users which may attempt to guess what the image by reading out the image filename or similar.)
  • If an image is supplementary to some surrounding text (but not deemed purely decorative), do not replicate content in the surrounding text. In this instance, you should use an empty alt
  • 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 a text format, you should use an empty alt, otherwise it will be duplication.

Compatibility

IE5.5Full
6.0Full
7.0Full
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Full
9.5Full

Causes no compatibility issues. It has excellent support across all tested browsers.

Most browsers do not display the content of the alt attribute unless the image is actually missing. It is, after all, supposed to be an alternative. Internet Explorer, however, will display the value for the alt in the form of a tooltip when you hover the mouse pointer over the img element in question. This is not the correct behaviour, so be mindful of the fact that it is the other browsers that are doing things according to spec, and it is Internet Explorer that is getting things slightly wrong. If you do want a tooltip effect on an image, the correct attribute to use for this is the title attribute.

an example of which is

Note that the way that Internet Explorer and Opera deal with missing images is not good, an example of which is shown in Figure 1 (screenshot taken from IE6 on Windows XP).

Figure 1. Missing image in IE showing the alternative text Missing image submit button showing the alternative text

Despite the image not being present, both of these browsers all still honor the height and width attributes of the missing image (if they are set) and also displays a placeholder frame. If the alt text takes up more space than the image dimension, neither shows the alternative text properly - it’s a little like looking through a letterbox. Safari is even worse, displaying little more than a question mark where the image should be, and no alternative text. Arguably, the best of the bunch is Firefox, which does not 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
Date:
Fri, 28 Mar 2008 12:21:10 GMT
Contributed by:
AutisticCuckoo

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

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters