Web Accessibility
Policy & Procedures
Tools & Resources
Questions?
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 | |
![]() |
<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 | |
![]() |
<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. | |


