A.
A text equivalent
for every non-text element shall be provided (e.g., via "alt", "longdesc",
or in element content).
Explanation:
Every graphic must have text description to
explain what the graphic shows. The general rule when using images
on a Web page is to provide an alt attribute in the image code and
to provide the same information which the visual user sees. This is
called "providing an equivalent experience." An alt tag should be
meaningful and contain no more than 9 words.
When a graphic includes text as part of the
graphic (in element content), provide an alt attribute that
includes the depicted text.
When describing simple graphics or photos, use
the <alt=" "> tag in your <img src>
field.
Animated graphics should be described, as well, to indicate
the action (see example below).
Bullets, horizontal rules, transparent images
used as placeholders, or images which have no significant meaning
for the page (what some Web Masters call "eye candy") can be coded as <alt="*">
Many Web editors provide a field for inserting
the alt tag. In FrontPage, right-click on your graphic and select
Image Properties. Here you will find the alt text field for
inserting your text.
Examples:
Image:
Image source code:
<img src ="bbeartop.gif"
alt="The University of Maine Black Bear">
NOTE: If you have a logo which represents your unit
on the page, it is not enough to just say alt="UMaine logo." Such a
tag would "pass" various accessibility tests, but obviously this tag
is not providing an "equivalent experience." A better alt attribute
would be: alt="The University of Maine Black Bear." This is the text
which conveys the information shown on the logo.
In element content:
Image source code:
<img src
="crestlogodrop.gif" alt="The University of Maine logotype and crest
art">
Animated image:
(Refresh your screen to view the animation.)
Animated image source code:
<img src ="pubsbook.gif"
alt="animated book flips through pages">
Bullet:
Image source code:
<img src ="roundbullet.gif
" alt="*">
Long description file
In order to facilitate screen readers reading
a page, one way to describe a complex chart or graphic in more
detail is to use a description link, normally called a D-link.
Rather than spell out "description link," the convention is to use a
single letter of D near the chart, which (when selected) takes the
user to another document describing the chart/graphic. The D can be
very small, such as 2 or 4 point or may be the same color as the
background.
<img src="enrollment.gif"
alt="2001 undergraduate enrollment"><a href=longdesc.htm">D
In this coding (above), a sighted person would
see the D next to the chart, and a screen reader would speak the
letter D.
You can also make the D invisible, still
placed next to the image, but having an alt text of D. The invisible
D might be a transparent gif with D as the alt text, or the letter D
coded to the same color as the Web document background.
<img src="enrollment.gif"
alt="2001 undergraduate enrollment"><a href=longdesc.htm"><img src="transparent.gif"
alt="D">
Make the D into a link to a file named "longdesc.htm"
or "longdesc.html." In this longdesc file, you can write a full
description of the graphic. If you have more than one photo being
described in the longdesc file, use a bookmark to take the user
directly to the description of the related photograph.
Back to
Creating Accessible Web Sites
