Accessible Image Maps

It is possible to use an image as part of your navigation process. Using an image such as the bathroom shown below has a great benefit for people who have learning disabilities, do not have english as their first language, or have reading disabilities. However it is not very helpful for blind people, users who have images turned off or people without a mouse. For this reason we must always include a set of duplicate links formatted using text only.

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, you must make sure that each action associated with a visual region can be activated from the keyboard (without a pointing device).

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). You should create client-side image maps (with "usemap") rather than server-side image maps (with "ismap") because server-side image maps require a specific input device. With client-side image maps, each "active region" in a picture can be assigned its own link that specifies what web page to retrieve when a portion of the picture is selected. Server-side image maps require the server to work out what area has been selected before deciding what action to take. Client side image maps are preferred over server-side image maps for at least two reasons: they are accessible to people browsing with non-graphical user agents and they offer immediate feedback as to whether or not the pointer is over an active region.

Each area of the image map is defined using a set of co-ordinates. The image map, and each area within in the map, must have alternative text. The alternative text for the active areas must say what will happen if the area is selected. You should also provide the "title" attribute for each area so that those browsers that use "title" are able to display the tag.

The properly marked up HTML code for a client-side image map is illustrated below.

Example of an image map

In the example below we have created areas around various bathroom fittings by listing the co-ordinates of the area shape. When a user selects an area the alt tag should appear (keyboard users may see a feint dotted line around the area)

Bathroom Report a broken bath Report a broken shower Report a broken toilet Report a broken sink

Select from -> Bath | Shower | Sink | Toilet

HTML code for image

Note the use of the "title" attribute as well as the "alt" attribute.


<p><img src="/bathroom.jpg" border="0" alt="Parts of a Bathroom" width="482" height="329" />
<map name="bathroom">
<area shape="poly" coords="3,161,4,283" href="/bath.htm" alt="Report a broken bath" />
<area shape="poly" coords="134,4,3,107" href="/shower.htm" alt="Report a broken shower" />
<area shape="poly" coords="323,117,444,273" href="/toilet.htm" alt="Report a broken toilet" />
<area shape="poly" coords="213,105,310,116" href="/sink.htm" alt="Report a broken sink" />
</map>

<p>Select from - <a href="/bath.php">Bath</a> | <a href="/shower.php">Shower</a> | <a href="/sink.php">Sink</a> | <a href="/toilet.php">Toilet</a></p>
</p>

 

When an image map such as this is used it is essential to also provide a set of standard hyperlinks (preferably in a list format). This will make sure that all our users will be able to go to the relevant pages even if they cannot access the links within the image map..

More information on image maps is given in the Navigation lesson.