Implementing Rule F
§ 1194.22 Web-based intranet and internet information and applications.
(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.
The idea behind this is that accessibility improves, because all of the information is in the HTML page. Keeping the map handling on the client side - letting the user know where she is - improves overall performance, and can allow the user to get cues and directions without needing a visit to the server.
Refer to Implementing Rule E for a discussion of the necessity of using image maps.
Available Geometric Shapes
There are four available geometric shapes:
default, which is the entire image;rect, requiring four coordinates (left-x, top-y, right-x, bottom-y);circle, requiring three coordinates (center-x, center-y, radius);poly, requiring pairs of x/y coordinates.
Technical Implementation Methods
Below is a fairly simple implementation of a client-side image map. The circular image map
hot spots have been created to be visible, so one knows they are there. The entire image
has alt text indicating what the image is of, and each hot spot has its own alt text.
Original image source: T/Maker Company
Code:
<img name="eyeimage" src="gf_image.jpg" width="360" height="288" border="0" usemap="#m_eyeimage" alt="Close-up photo of an eye">
<map name="m_eyeimage">
<area shape="circle" coords="310,29, 19" href="gf_im.htm#eyelid" title="Eyelid" alt="Eyelid" >
<area shape="circle" coords="223,42, 19" href="gf_im.htm#eyelashes" title="Eyelashes" alt="Eyelashes" >
<area shape="circle" coords="232,213, 19" href="gf_im.htm#iris" title="Iris" alt="Iris" >
<area shape="circle" coords="170,151, 19" href="gf_im.htm#pupil" title="Pupil" alt="Pupil" >
</map>
Skip links to other Section 508 Rules and return to main content