Skip to Local Navigation
Skip to Content
California State University, Long Beach
Web Comm, California State University, Long Beach
Print this pageAdd this page to your favoritesSelect a font sizeSelect a small fontSelect a medium fontSelect a large font
 

Web Accessibility: Imagery

§1194.22 (a) A text equivalent for every non-text element shall be provided (e.g., via “alt”, “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.

Visual Aids

open → ← close

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:

President F. King Alexander

Here is the code for this photo:

<img src="images/fkalexander.gif" alt="President F. King Alexander" width="65" height="65" />

Decorative and Formatting Images

open → ← close

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.

Image Links

open → ← close

An image link resides inside an anchor tag, <a>:

Zipcar

Here is the code for this link image:

<a href="http://zipcar.com/csulb/">

<img src="images/zipcar_logos.png" alt="Zipcar" />

</a>

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.

Image Hotspots

open → ← close

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.

Example:

Map of Campus Regions North Campus East Campus West Campus South Campus Campus Center West Campus North Campus East Campus Campus Center South Campus

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"/>

</map>

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.

Image Buttons

open → ← close

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" />

More information on graphical buttons can be found in the Forms module under Buttons and Advanced Techniques.

Long Descriptions

open → ← close

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 longdesc attribute:

Pie chart of total impact of student and university expenditures

An 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 longdesc:

Embed the Description

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:

<p>

<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"/>

</p>

Separate the Description

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:

<p>

<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"/>

</p>

…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

Special Circumstances

open → ← close

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.

Example:

Copy Center Copy Center offers great deals!

Binding Center Come to the Binding Center and get your books bound.

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.

Copy Center Copy Center offers great deals!

 Binding Center Come to the Binding Center and get your books bound.

More Advanced Use of Images

open → ← close

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.

Summary

open → ← close
  • Every active image must have a descriptive and succinct alt attribute.
  • Every inactive image must have a valid alt attribute conveying the information in the image.
  • Use the longdesc attribute when there is too much information to fit in the alt attribute.
  • Avoid being redundant.
  • Try to imagine how a screen reader (link to definition) would read your page.