Provide alt attributes in image maps

The Challenge

Image map is the term for a graphic in which parts of the image are links to other Web resources. Image maps require the user to position the mouse over a region of the graphic to select a link. Thus, they can be problematic for people who can't use a mouse.

There are two kinds of image maps: server side and client side. Developers should avoid using server-side image maps. When someone clicks on a section of the image map, coordinate data is sent from the client to the server, which then determines the target link. Because it is not possible in this case to provide alt attributes on the client browser for the selected image sections, screen readers cannot interpret the server-side image map.

Solutions

  • Do not use server-side image maps.
  • Widespread use of CSS in many cases has eliminated the need for image maps, but if you need to use an image map, be sure to use only the client-side variety.
    • Define alt attributes for all regions and hyperlinks.

Skip code example

<img src="map_example.jpg" usemap="#navigation" alt="Navigation Bar">
<map name="navigation">
  <area shape="rect" coords="157,14,239,31" href="http://test.ucop.edu" alt="Home">
  <area shape="rect" coords="245,14,325,31" href="http://test.ucop.edu/news/" alt="News">
  <area shape="rect" coords="331,14,412,31" href="http://test.ucop.edu/services/" alt="Services">
  <area shape="rect" coords="417,14,501,31" href="http://test.ucop.edu/comments/" alt="Comments">
  <area shape="rect" coords="505,12,586,31" href="http://test.ucop.edu/search/" alt="Search">
</map>