The alternative text of the IMG element

Prerequisites

Browsers that are subjected to this test should support the IMG element, although they need not be graphical browsers. To view the demos correctly (section 1) you will need a CSS capable graphical browser.

See also the ALT text mini FAQ.

1. Alt stands for Alternative...

The alt text of an IMG element is alternative text, that is, text that should completely replace the image, if the image cannot be shown. In other words, if the image could not be drawn, then it should not be replaced by a box containing the alt text, instead, the alt text should be drawn inline.

From the spec:

Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternate text to serve as content when the element cannot be rendered normally.

Lynx does this correctly.

There now follows a section representing a company's home page. It consists of an H1 element containing a single image, the logo of a company, followed by a paragraph.

But! Oh, No! The image cannot be displayed! (This may be because image loading is disabled or because the link is broken, for example.) The 'usual', wrong, way of drawing the result is to draw the alt text in a box. Something like this:

This is wrong. It is an incorrect rendering. None of the tests in section 2 should look anything even remotely like the above. The alt text should appear inline, as if the IMG wasn't there. Like this:

2. The Tests

Now that you know what should happen, here is how this browser does it:

The above should be indistinguishable from the last example in section 1.

Note that this only applies to once the image cannot be displayed. While the image is still being fetched, then if the IMG has explicit height and width attributes, it should be drawn in as a placeholder. This is because it is then an aid to incremental rendering, and users do not have to see their page jump whenever a page is downloaded. The placeholder should go away if the image is later found to be undrawable.

Here is how this browser copes with explicit height and width attributes, when the image can be fetched (this should look the same as the first demo of section 1):

And here is how this browser copes with explicit height and width attributes, once the image is known to be unfetchable (or if images are disabled):

This last test should look the same as the last demo of section 1.

Up to the Evil Tests Page.

Bugzilla: Bug 1994

Last updated in January 1999.