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

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

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.