HTML and CSS Reference
In-Depth Information
perfectly valid and is sometimes appropriate. In particular, some sites use small images
to help position elements on a page. Although this practice is strongly discouraged, it's
still used. Text-based browsers will, in the absence of
alt
text, generally display some-
thing like
[IMAGE]
on the page. If you include the
alt
attribute but leave it empty, the
label
IMAGE
will be left out, making things easier on your users.
HTML also provides another way of describing images that's meant to improve accessi-
bility: the
longdesc
attribute of the
<img>
tag. The
longdesc
attribute is intended to be
used as a place to enter long descriptions of images. For example, if an image is a chart
or graph, you can explain how it is used and what information it is intended to convey. If
the picture is a nice photo of a waterfall, you can describe the waterfall. In many cases,
images are used simply to make web pages flashier or aesthetically pleasing, and nothing
more than
alt
text is required. However, when the actual meaning of a page is conveyed
through the use of images, providing descriptions of those images is a key to accessibil-
ity. For example, suppose that you're working for a financial publication, and a story on
the declining stock market includes a graph showing the consistent decline of the major
indexes over the past few years. In print, that image would probably include a caption
explaining what's in the image. On the Web, you could put that caption in the image's
longdesc
attribute. Or if you prefer, you could put it on the page as a caption, as long as
your layout indicates in some way that the caption refers to the image in question.
Here's an example of what I'm talking about:
<img src=“graph1.gif” longdesc=“Graph showing that the S&P
500 and Dow Jones Industrial Average have dropped an average of 20%
annually over the last 3 years.” />
19
NOTE
The
longdesc
attribute has been removed from HTML5. The spec-
ification instead recommends that the page include a link to a
long description for an image if appropriate.
There's one final area to discuss when it comes to images: the marriage of images and
links in the form of image maps. As you might imagine, image maps can be an accessi-
bility issue. Some browsers will display the links from an image map as a menu, but the
only certain way around this is to provide users with an alternative to image maps in the
form of text links. Whenever you use an image map, make sure to include text equiva-
lents of the links somewhere on the page.
