Web Accessibility at the University of California
The Challenge
Image map is the term for a graphic in which parts of the image are links to other Web resources, as in this example, where each colored pencil links to a different UC campus:
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
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>
