Image Map Guidelines (from W3C HTML Techniques)
An image map is an image that has "active regions." When the user selects one of the regions, some action takes place -- a link may be followed, information may be sent to a server, etc. To make an image map accessible, content developers must ensure that each action associated with a visual region may be activated without a pointing device (such as a mouse).
Image maps are created with the MAP element. HTML allows two types of image maps: client-side (the user's browser processes a URI) and server-side (the server processes click coordinates). For all image maps, content developers must supply a text equivalent.
Ths page contains guidelines for:
* using serve-side image maps
* writing redundant text in 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.
Content developers should create client-side image maps (with the "usemap" attribute ) rather than server-side image maps (with the "ismap" attribute) because server-side image maps require a specific input device. If server-side image maps must be used (e.g., because the geometry of a region cannot be represented with values of the shape attribute), authors must provide the same functionality or information in an alternative accessible format. One way to achieve this is to provide a textual link for each active region so that each link is navigable with the keyboard. If you must use a server-side image map, please consult the section on server-side image maps.
Standard HTML client-side image maps are used, and appropriate alt tags are provided for the image as well as the hot spots.
Provide text equivalents for image maps since they convey visual information. As with other links, the link text should make sense when read out of context. Refer to the section on Link Text for information on writing good link text. Users may also want keyboard shortcuts to access frequently followed links. Refer to the section on Keyboard access to links.
If AREA is used to create the map, use the "alt" attribute:
<img src="welcome.gif"alt="Image map of areas in the library" usemap="#map1"> <MAP name="map1"> <AREA shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference"> <AREA shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab"> </MAP>
The following example illustrates the same idea, but uses OBJECT instead of IMG to insert the image to provide more information about the image:
<OBJECT data="welcome.gif" type="image/gif" usemap="#map1"> There are several areas in the library including the <a href="reference.html">Reference</A> section and the <a href="media.html">Audio Visual Lab</A> </OBJECT> <MAP name="map1"> <AREA shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference"> <AREA shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab"> </MAP>
In addition to providing a text equivalent, provide redundant textual links. If the A element is used instead of AREA, the content developer may describe the active regions and provide redundant links at the same time:
<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navigate the site. [<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</A>] [<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A>] [<A href="search.html" shape="circle" coords="184.200,60">Search</A>] [<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>] </MAP> </OBJECT>
Note that in the previous example, the MAP element is the content of the OBJECT element so that the alternative links will only be displayed if the image map (navbar1.gif) is not.
Note also that links have been separated by brackets ([]). This is to prevent older screen readers from reading several adjacent links as a single link as well as to help sighted users distinguish between links visually.
Content developers should make sure they include printable characters (such as brackets or a vertical bar (|)) surrounded by spaces between adjacent text links. The problem does not occur if images have been used as links; The alt-text will not be read as a single link because of the place-holding images that graphical browsers use when images are not loaded. Refer to the section Grouping and bypassing links for more information.
Redundant text links shall be provided for each active region of a server-side image map.
Separate text links are provided outside of the server-side image map to access the same content that the image map hot spots access.
When a server-side image map must be used, content developers should provide an alternative list of image map choices. There are three techniques:
Include the alternative links within the body of an OBJECT element (refer to the previous example illustrating links in the OBJECT element).
If IMG is used to insert the image, provide an alternative list of links after it and indicate the existence and location of the alternative list (e.g., via that "alt" attribute).
<A href="http://www.example.com/cgi-bin/imagemap/my-map"> <IMG src="welcome.gif" alt="Welcome! (Text links follow)" ismap> </A> <P> [<A href="reference.html">Reference</A>] [<A href="media.html">Audio Visual Lab</A>]
If other approaches don't make the image map accessible, create an alternative page that is accessible.