Image maps are used to define regions within a larger image as links. For instance, Web sites in which you click a state on a U.S. map to see resources for that state use image maps. Unless special precautions are taken, screen readers will not be able to identify links embedded in an image map.
1. Whenever you use a client side image map be sure to include the ALT attribute within each AREA tag (the hot spot) in order to provide an alternative text link for screen readers. The NAME attribute should also be included in the MAP tag.
SECTION 508 - A text equivalent for every non-text element shall be provided.
2. If images are used as links in the image map, use the TITLE attribute in an AREA tag (hot spot) to provide a visual tooltip.
3. Avoid CGI server-side image maps whenever possible and use client-side
image maps with the MAP tag instead.
NOTE: Image maps produced by Dreamweaver, FrontPage and other HTML editors are usually
client-side
image
maps.
SECTION 508 - Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
4. If CGI server-side image maps are needed, then provide an separate text-based menu.
SECTION 508 - Redundant text links shall be provided for each active region of a server-side image map.
Generally speaking client-side image maps are preferred to server-side image maps for accessibility purposes. In addition, a server-side image map is more difficult for one person to maintain because it involves programming a CGI; therefore client-side image maps are used much more often.
A client-side image map includes coordinates for different links embedded within an image. Some source code for a client-side image map would look like this.
Note that the ALT tag is included for the main image at top and each hot spot in order to provide a text alternative for screen readers. Titles for hot spots are included in order to display tooltips.
<img src="examples/ANGELHeader.jpg" alt="Penn State Links Menu" width="586" height="72" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="245,52,317,72" href="http://www.psu.edu" alt="Penn State Home Page" title="Penn State Home Page" >
<area shape="rect" coords="324,55,366,70" href="http://wwww.lias.psu.edu" alt="LIAS-Libraries Catalog" title="Libraries Catalog" >
...
</map >
A server-side image map uses a CGI script to access an image map file on your server. Some source code for a server-side image map would look like this:
<a href="/cgi-bin/imagemap/psu.map"> <img src="psu.gif" ismap
width="160" height="140" border="0"> </a>
Note that this code does not allow for any ALT or TITLE tags to be included.
To make this server-side client map accessible, you can add a text based menu such as
Site Menu:
Home Page/Main Menu
| Section 508 Guidelines
| Quick Checklist
| Details by Tag
| Links
| I.T.S. Seminar Page
| Sitemap
©1999-2006 Pennsylvania State University.
This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.