Chapter 36. Making Image Maps More Accessible

Everybody knows that, to make an image more accessible, you write a detailed text description. Accessibility tools such as screen readers go specifically for the text, and the visually impaired visitor hears a verbal description of what the image shows.

But an image map is a special case, because it isn't just an image. An image map combines an image with clickable areas that work like links. Therefore, it only stands to reason that a more accessible image map requires both an overall text description and a text description for each clickable area.

Use the alt attribute of the img tag to give a text description for the overall image, just as you would for any other image on your site:

[View full width]
 <img src="/books/2/30/1/html/2/images/mars.jpg" width="500" height="300" usemap="#mars" alt="An image map  showing the decline of surface water on the planet Mars."> 

The alt attribute of the area tag serves nicely for a clickable area's text description:

 <map name="mars">   <area shape="rect" coords="9,3,164,148" href="mars01.htm" alt="Phase 1">   <area shape="rect" coords="172,2,328,149" href="mars02.htm" alt="Phase 2">   <area shape="rect" coords="334,5,487,149" href="mars03.htm" alt="Phase 3">   <area shape="rect" coords="9,151,163,294" href="mars04.htm" alt="Phase 4">   <area shape="rect" coords="171,153,327,296" href="mars05.htm" alt="Phase 5">   <area shape="rect" coords="334,152,488,295" href="mars06.htm" alt="Phase 6"> </map> 

Your favorite standards body, the World Wide Web Consortium (W3C), advises you to include redundant text links for the clickable areas of the image map so that text-only browsers and other devices that do not display images can still readily access the image map's content, as in Figure 36.1. Adding a short bit of instruction text doesn't hurt, either.

Figure 36.1. This page may never win a beauty prize with a broken image, but its image map is completely useable.

TIP

Always separate the links in a horizontal list with some type of typographical character such as parentheses, brackets, or pipes (vertical bars). Doing this helps your sighted visitors distinguish the links, and it helps screen readers figure out where one link ends and another begins.

In other words, don't do this:

Phase 1 Phase 2 Phase 3 Phase 4

Try this:

[Phase 1] [Phase 2] [Phase 3] [Phase 4]

Or this:

(Phase 1) (Phase 2) (Phase 3) (Phase 4)

Of course, brackets and parentheses give you a blocky, tech-terminal, math-geeks-only look. For something a bit more aesthetic, try pipes instead:

Phase 1 | Phase 2 | Phase 3 | Phase 4

Listing 36.1. View Source for Figure 36.1.

[View full width]

 <p>Click the phases of surface water on Mars for more information.</p> <img src="/books/2/30/1/html/2/images/mars.jpg" width="500" height="300" border="0" usemap="#mars" alt="An  image map showing the decline of surface water on the planet Mars."> <p><a href="mars01.htm">Phase 1</a> | <a href="mars02.htm">Phase 2</a> | <a href="mars03 .htm">Phase 3</a> | <a href="mars04.htm">Phase 4</a> | <a href="mars05.htm">Phase 5</a> |  <a href="mars06.htm">Phase 6</a></p> <map name="mars">   <area shape="rect" coords="9,3,164,148" href="mars01.htm" alt="Phase 1">   <area shape="rect" coords="172,2,328,149" href="mars02.htm" alt="Phase 2">   <area shape="rect" coords="334,5,487,149" href="mars03.htm" alt="Phase 3">   <area shape="rect" coords="9,151,163,294" href="mars04.htm" alt="Phase 4">   <area shape="rect" coords="171,153,327,296" href="mars05.htm" alt="Phase 5">   <area shape="rect" coords="334,152,488,295" href="mars06.htm" alt="Phase 6"> </map>