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
alt attribute provides alternative
content that can be displayed instead of the image.
alt attribute clearly explains what the image
<img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina" />
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
aelement, and is thus being used as a link, use an
altattribute 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
Don’t simply omit the
altattribute—it’s required, and absence of an
altattribute 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
altattribute. In this instance, you should use an empty
- 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
altattribute to the image.
It causes no compatibility issues, and has excellent support across all tested browsers.
Most browsers don’t display the content of
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
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
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
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.
In IE and Opera, both of these browsers honor the
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
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