Skip to Main Content >

IT Accessibility Curriculum and Resources

Standard 9:
Image Mapping

  • STANDARD 9.1   Image mapping will be client-side based.
    • Comments:   Image maps are text files that allow portions of images (invoked via the <img> element) to act as links (invoked via the <area> element and the <href> attribute). A single image can be broken into several regions, each with its own target URL (link).

      The image map invisibly overlays one image, seen by the sighted user. The image contains visual cues for the sighted user which correspond to destinations defined in the image map. The <map>and <area>elements use the coordinates associated with those visual cues to specify the target file for each area. The img element has the usemap attribute which is set to the name of a map element. The map element contains a sequence of area elements. Each area has a specified physical area of the image given by pixel coordinates of a circle, rectangle, or polygon together with an href, i.e., a URL to open if the area is selected. When a user clicks on such a map, the browser can easily determine which area (if any) was selected and which URL to open.

      There are two types of image maps: server-side and client-side. 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. Also, if alt attributes are present for areas in a client-side image map, those alt attributes can be spoken for the visitor.

    • HTML Elements Affected:  <object>, <img>, <map>, <area>

    • Code Example:  

      <object data="navibuttons.gif" alt="Navigation Panel" usemap="#navimap">
           <map name="navimap">
                <area href="about.html" alt="About This Site" shape="rect"
                     tabindex="1" coord="0,0,118,28">
                <area href="products.html" alt="Our Products" shape="rect"
                     tabindex="2" coords="118,0,184,28">
                <area href="topten.html" alt="Our Top Ten Products" shape="circle"
                     tabindex="3" coords="184,200,60">
           </map>
      </object>
  • STANDARD 9.2   Redundant text links will be provided for each active region of a client-side image map.
    • Comments:  Although alt and tabindex attributes can be added to the area element (see above), there is no guarantee that the visitor will be using a device capable of displaying visual information, that the visitor will be able to parse visual information, or that the visitor will have the dexterity required to manoeuver a pointing device to the described active areas of the image map. For these reasons and to promote general usability, it's a good idea to incorporate redundant text links directing the visitor to the same sections of the web site featured on the image map.

    • HTML Elements Affected:  N/A - Standard applies more to general page layout than specific elements or attributes.
    • Code Example:  N/A - Standard applies more to general page layout than specific elements or attributes.

Back to NYS Standards Discussion HOME