§1194.22 (a) A text equivalent for every non-text element shall be provided (e.g., via “
longdesc”, or in element content).
When deciding what to do about images on the web it is important to take in the big picture. There are different kinds of images with different uses. Most of them are jpegs or gifs used as visual aids, decorations, or for navigation. Some images are spacers, transparent images (usually .gif or .png) used to influence the layout of a page. All of these require descriptive text, aka "text equivalents" or "alternative text" so screen readers can provide their users with descriptions and functions (if any) of the images. In some cases this descriptive text could be only a few words while in others it might require a longer description. In a few cases, like border artwork or spacer images, no description is required yet there still must be something left for screen readers in order to avoid confusion.
Every image must have alternative text that conveys a description of the image and its function (if it serves as a button). This is provided with the
alt attribute within the
img tag. An
alt attribute is required on all images. Spacer images get an empty (
alt="") attribute. As a first example, here is a photo such as you might see on a University web page:
Here is the code for this photo:
<img src="images/fkalexander.gif" alt="President F. King Alexander" width="65" height="65" />
Images are often used for decoration only and serve no function other than to improve the aesthetics of the page. Spacer images, background images, patterns, decorative borders are all examples of images used for decoration. For this type of image the null
alt="" is appropriate. Note: Do not put a space in between the quotation marks. If you put a space in there Internet Explorer will display the tooltip when you roll over it with your mouse.
Here is a code snippet of a transparent spacer image:
<img src="images/1-pix.gif" width="1" height="1" alt="" />
The use of spacer images is usually not necessary if you know how to use CSS (Cascading Style Sheets) for page layout.
An image link resides inside an anchor tag,
Here is the code for this link image:
<img src="images/zipcar_logos.png" alt="Zipcar" />
We used to have "Zipcar wheels when you want them" as the alt tag. This is too much information. The user will get plenty of information about Zipcar after he clicks the link as goes to the site. We could have put "home" because the link directs the user to the Zipcar home page. That would have been confusing because there is no context for the word home on the page.
A client-side image map is an
img element with the
usemap attribute whose value is the name of the
map element. Note: It is merely a coincidence that this example of an image map is actually a map of our campus. The image map technique can be used with any kind of image.
Here is the code for this image map:
<img src="images/regions_sm.gif" width="300" height="300" usemap="map1" alt="Map of Campus Regions" id="regionmap"/>
<map name="map1" id="map1" >
<area shape="rect" coords="29,231,131,245" href="/maps/campus/west.html" alt="West Campus"/>
<area shape="rect" coords="29,199,131,215" href="/maps/campus/north.html" alt="North Campus"/>
<area shape="rect" coords="29,216,131,230" href="/maps/campus/east.html" alt="East Campus"/>
<area shape="rect" coords="29,261,131,278" href="/maps/campus/center.html" alt="Campus Center"/>
<area shape="rect" coords="29,245,131,260" href="/maps/campus/south.html" alt="South Campus"/>
This is a good example of something that should get alt-text but doesn't always get it. In order to be ATI compliant these must be included. Notice that the
area tags are set in a logical order, from left to right and top to bottom.
An image button is usually found in a form input of
type="image". Here is a typical image button:
The source for the image is specified with the src attribute of the input element:
<input type="image" src="images/searchbutton_icon.gif" alt="search" />
There are times when an image contains important information that must be described to blind users in order for them to understand it in context with other materials on the page. Sometimes a photo or other image may need a long description. More often such images consist of charts or graphs that represent tabular data. Here is an example of an image likely to require a
alt attribute is still required, but because it should be kept fairly short some other technique is needed to provide the extended description. This is where the
longdesc attribute is most useful. There are two ways of implementing
Embedding the long description inside the image tag works well if the description isn't too long and doesn't need special formatting. Using this method, the code for the above example would look like this:
<img src="accessibilityTutorials/imagery/images/total_impact.gif" width="413" height="290" alt="Pie chart of total impact of student and university expenditures" longdesc="Total Impact - University Expenditures: $614.9 million; Student Expenditures: $419.3 million"/>
This is the best way to handle the example, since the data can be placed in a tab-delimited plain text file appropriate for screen reader access. Using this method, the code for the above example would look like this:
<img src="accessibilityTutorials/imagery/images/total_impact.gif" width="413" height="290" alt="Pie chart of total impact of student and university expenditures" longdesc="accessibilityTutorials/imagery/total_impact.txt"/>
…and here is what the linked text file looks like:
Total Impact University Expenditures: $614.9 million Student Expenditures: $419.3 million
An in-depth discussion of
londesc is available at http://www.webaim.org/techniques/images/longdesc.php
Sometimes you will have an icon image next to a text link. In that case the icon has contextual importance and needs a text equivalent.
The better thing to do in this case is to put each of those paragraphs in one anchor tag and give the image alt="". This is the only situation where an active image could have a null alt-text.
Background images were mentioned above. If you place an image in the background of a div for example and there is text embedded in the image, you must have a text equivalent on the page. This requires knowledge of Cascading Style Sheets and requires advanced knowledge of web design. If you use background images make sure they do not contain any text that is important to the content of the page. If you need help with this please contact your friendly neighborhood Webmaster.
altattribute conveying the information in the image.
longdescattribute when there is too much information to fit in the