Getting image maps right the first time- Details
[Why? ]
[How? ]
[Access keys ]
Image maps are areas of an image that are associated with behaviours triggered by a cursor. For example, a cursor moving over an image may cause it to change colours or become highlighted. Clicking the mouse may then take you to a different web page.
Web accessibility guidelines require image maps to be client-side based, that is, their information has to appear in the html on which the page is based. This enables screen readers and text browsers to read the Alt text that accompanies each image.
Why ?
- A client-side image map's functions are provided on the client's (the user's browser) end rather than at your web server's side. All the information needed to run the map is included in your web page document.
- Server-side image maps, on the other hand, do not allow you to use ALT tags to describe individual links in the image map.
Since text-only browsers, screen readers, or assistive devices may not be capable of interpreting links in server-side image maps, use client-side image maps instead of server-side image maps.
How ?
To create a client-side image map, you need an appropriate image. Then you will need to define the regions and their coordinates; this is generally done using a software programme. MapEdit is an image map editor programme, free to download for educational institutions and nonprofit organisations.
In HTML, the regions of the image map are defined using the <MAP> and <AREA> tags and the image map is applied through the usemap attribute of the image tag (<IMG>).
Code Example
<IMG src="images/SearchEngine.jpg" alt="World's Most Boring Search Engine Image Map" usemap="#searchMap">
<MAP name="searchMap">
<AREA shape="rect" coords="2, 36, 173, 114" alt="Yahoo" href="http://www.yahoo.com">
<AREA shape="rect" coords="175, 36, 362, 114" alt="Google" href="http://www.google.com">
<AREA shape="rect" coords="2, 115, 173, 200" alt="Hotbot" href="http://www.hotbot.com">
<AREA shape="rect" coords="175, 115, 362, 200" alt="Alta Vista" href="http://www.altavista.com">
</MAP><BR>
[<A href="http://www.yahoo.com">Yahoo</A>] [<A href="http://www.google.com">Google</A>]
[<A href="http://www.hotbot.com">Hotbot</A>] [<A href="http://www.altavista.com">AltaVista</A>]<BR>
NOTE: Ensure links are separated by more than a space or a break to prevent older browsers from reading consecutive links as a single link. For this example, the brackets were used; however, there are numerous other ways to keep consecutive links separated.
Access Keys
For links that are commonly accessed and to increases accessibility, use the access key attribute to associate a key to a link in image map.
For example the code for Google is as follows:
<A href="http://www.google.com" accesskey="G">Google</A>