Skip header information, go directly to content

mwas standard Standard 6 -- Image Maps.
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.

Examples:
6.1 -- Use standard HTML client-side image maps with appropriate alt tags for the image and hot spots .

Image Maps -- Dos and Don'ts

see also: Standard 7 -- Server-side Maps.

Do Don't

Use client-side image maps whenever possible. Use server-side image maps only when map areas cannot be defined as a geometric shape.

Use server-side image maps regardless of the map shape.

Why: Client-side image maps store map information within the HTML document. Server-side image maps require server processing to define the hotspot area and action (or link location). Thus, links in server-side maps do not show up on link lists and other assistive technology tools. Plus they require more server resources and more delay time for users.

How: Insert an IMG as usual. Create a MAP and link it to your IMG using the "id" attribute. Create an AREA for each map hotspot.

Sample HTML Code:

End Code.

Do Don't

Include a separate ALT tag for each map AREA (hotspot).

Only give an ALT tag to the IMG or to the MAP as a whole and not to the individual defined AREAS.

Why: Unlike server-side image maps, the client-side image map allows an author to assign text to each image map “hot spots.” which helps assistive technology users to more easily identify and activate regions of the map. Also, region ALT tags will appear, even if the image does not download or images are turned off.

How: For each "area" element in the map, include an ALT tag that defines the function of the area.

Get more help with image maps, visit W3C's "13.6 Image Maps".

previousPrevious Nextnext

Top of Page || Return to Index
View/print in PDF format. (Acrobat Reader required.)

Ohio State University