Section 508 Compliance

HTML Coding Tutorial

Client-Side Image Maps

(f): 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.
Explanation: Because of the potential accessibility problems with server-side image maps (see Server-Side Image Maps), client-side image maps should be used in a majority of cases.
Importance: With client-side image maps, each "active region" in a picture can be assigned its own "link" (called a URL or "Uniform Resource Locator") that specifies what web page to retrieve when a portion of the picture is selected. HTML allows each active region to have its own alternative text, just like a picture can have alternative text.

Bad Examples

1.  Using Server-Side Image Maps
If at all possible, use Client-Side Image Maps
2.  Not using alt text for each area in the image map
Image with two hypothetical links <img src="images/resources_new.gif" alt="Image with two hypothetical links" border="0" usemap="#map">
...
<map name="map">
<area shape="rect" coords="24,32,94,50" href="home.htm">
<area shape="rect" coords="23,51,130,64" href="faculty_staff.htm">
</map>

Good Example

1.  Using alt text for each area in the image map
Image with two hypothetical links <img src="images/resources_new.gif" alt="Image with two hypothetical links" border="0" usemap="#map">
...
<map name="map">
<area shape="rect" coords="24,32,94,50" href="home.htm" alt="Home">
<area shape="rect" coords="23,51,130,64" href="faculty_staff.htm" alt="Faculty/Staff">
</map>

Do-It-Yourself Fixes

As with normal alt tags, you can follow the same Do-It-Yourself Fixes in the first part of this tutorial to avoid future problems.