DEV 2.6 Construct accessible image maps

Image maps can be used to great effect and be accessible.

They must be constructed so that their use does not require people to see them or to make very fine movements to use them.

  • Do not use image maps for the sake of it:
    • Consider individual image links to perform the same function;
    • Consider a simple text-based menu instead.
  • Always use client-side image maps, never use server-side maps:
    • There are almost no circumstances that justify the use of server-side maps - if they are used then a redundant set of links (or equivalent functionality) must be supplied.
  • Provide alt text (see DEV 6.1):
    • For each area of the image map to describe its function;
    • For the map as a whole to describe its overall function.
  • Use the title attribute as well:
    • Just replicate the alt text in the title attribute:
      • This will supply information that some browsers leave out.
  • Avoid very small clickable areas:
    • Small targets might be difficult or impossible to use by people with sight or mobility impairments.
  • Add a cue to each area to show that it is clickable:
    • e.g. borders on geographical maps, rollover effects etc.

  Never use server side maps

<img src="map.gif" ... usemap="#building" alt="Building layout" title="Building layout" >

<map name="building">
<area ... alt="West wing" title="West wing">
<area ... alt="East wing" title="East wing">

</map>

A client side map with alt text, rollover, clear visual hotspots - with cues indicating they are clickable