Image Maps, Web Accessibility, The University of Arizona

Requirements:

Each hotspot has an appropriate ALT tag associated with it.
Redundant text links are provided for every image map.
The tab order of each image map is logical.

Image Maps are graphics on a web page that have hyperlinks embedded within them. The hyperlinks become 'hotspots' or shapes within the graphic that are clickable.

The image below is the navigational banner used on the second level pages of the University of Arizona's website. It is an ordinary GIF file with 11 hotspots defined:

Image maps are often used for building navigation throughout your site. Image maps can help create a consistent graphic identity that signals the user that they are still within your site website.

Hotspot ALT Tags:

All Image Maps should include ALT tags for each hot spot.

     
<map name="top-banner"> <area shape="rect" 
alt="Campus Events" href="events.html" 
coords="36,59 107,85">
          
<area shape="rect" alt="About Us" 
href="aboutus.html" 
coords="108,59 185,85">

</map>

Redundant Text Links

Provide redundant text hyperlinks for each image map. The text may be appear in small text and is often placed at the bottom of the page. Redundant text links should be provided on every web page that contains an image map. The redundant text links at the bottom of this page are an example. They appear at the bottom of every page that contains an image map within this web site.

Tab Order

The Tab Order of a image map represents how a user moves through the site using a TAB key instead of a mouse. Try moving through the examples below using the TAB key. With each press of the TAB key, you are skipped from one hyperlink to the next within the image maps below:

Good Tab Order Example:
The user tabs though the hotspots in the imagemap correctly.

Poor Tab Order Example:
The user tabs through hotspots in the incorrect order because the individual area Tags for each hotspot are listed out of order within the HTML code.

To correct an image map tab order problem, make sure that each hotspot is defined in the order that it appears on the page or use TABINDEX attribute to define the correct tab order.

Tabindex Code Example:


<map name="bannermap">

<area shape="rect"  href="internal.html" 
alt="Employee information" coords="506,2 577,18" 
tabindex="4">

<area shape="rect" href="news.html" 
alt="News and events" coords="186,2 303,18" 
tabindex="1">

<area shape="rect" href="searches.html" 
alt="Search"  coords="311,2 475,18" 
tabindex="2">

<area shape="rect" href="main.html" 
alt="Main site" coords="3,1 177,18"
tabindex="3">

</map>