Tutorials from WAC. Click or press ALT+T to return to the Tutorials main page.

Understanding and Applying
Section 508 Standards

divider

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.

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.

Here is an example of a client-side image map. There are two link "areas" on this image -- can you locate them?:

Disability Studies at OSU OSU Home Page Return to Disability Studies Home Page

Here is the code that inserts the image and creates the image map:

<img src="../images/disabilitystudiestopbar3.jpg" alt="Disability Studies at OSU" name="disabilitystudies" width="400" height="55" border="0" usemap="#Map" id="disabilitystudies">
<map name="Map">
<area shape="rect" coords="4,5,59,45" href="http://www.osu.edu" alt="OSU Home Page">
<area shape="rect" coords="77,3,396,50" href="http://ada.osu.edu/disabilitystudies" alt="Return to Disability Studies Home Page">
</map>

Next  Link and graphic of hand pointing to the next page.

divider

(a) Alternate Descriptions for Non-Text Elements | (b) Synchronization with Multimedia | (c) Use Color for Design, not Context | (d) Using Style Sheets | (e) Server-Side Image Maps | (f) Client-side Image Maps | (g & h) Data Table Headers | (i) Using Frames | (j) Flashing or Flickering Elements | (k) Updating Text-Only Versions | (l) Using Scripts to Create Dynamic Pages | (m) Using Applets and Plug-Ins | (n) Using Online Forms | (o) Skip Navigation Link | (p) Using Time Out Scripts | 508 Checklist | Testing for 508 Compliance |

Return to Start of Section 508 Tutorial

Information in this tutorial adapted from the Section 508 web site: http://www.section508.gov and the Access Board's Guide to the Section 508 Standards for Electronic and Information Technology.