Hot Topic: Hot Spots (Working with Image Maps)

One of the most debated and most misunderstood accessibility techniques has to do with image maps. The Web Accessibility Initiative (WAI) suggests that designers use client-side image maps instead of server-side.** Most people misunderstand this WAI recommendation as a requirement; we read this as a suggestion and have adopted a different method for dealing with image maps that we believe is more effective. The most widely spread suggestion for image maps is that an alt tag be assigned to each hot spot in the image map. This is a very generous gesture but about like giving a pair of reading glasses to a blind person. Most screen readers don't even pick up the alt tags for the hot spots; they only read the alt tag for the large image. The following big hole of a graphic is an excellent example of one designer's good intentions gone awry. Yes, we know it's missing. The same frustration you feel from this big hole of something missing on this page is the same frustration blind users feel when they hit an image map that's not been treated properly.

Yes, that is an image map with the graphic missing, but the code is still in place. There are hot spots defined within that big blank area. Go ahead - move your mouse around inside the empty box and watch for the little hand to appear. Notice that there are even alt tags applied to the hot spots you can find (you'll see these appear on a PC). Now just think - your initial encounter with this graphic is exactly what a blind user's would be: absolutely no knowledge of what this graphic is except for the main alt tag. As frustrating as this graphic is for you the sigthed user, you still have a distinct advantage over the visually impaired user: you can roll your mouse around and see that there are places to click (even though you had to have prompting). A visually impaired user would have no prompting whatsoever and would be stopped cold by this graphic in his or her cyberspace journey (not even the direction to go "left" in the text next to the graphic is of any help).

** In client-side image maps, the hot spots and their definitions are loaded in a user's browser and therefore readable by screen reading software (so many think), whereas with server-side image maps the hot spot definitions reside on the server and therefore cannot be read by a screen reader.