Accessible Imagemaps
Imagemaps? I hear them saying: Oh no, for accessibility's sake, don't rely on images to provide link information!!!
But, as I've stated before, accessibility isn't just about blind users. An image can actually improve accessibility.
I chose an example showing a map of Germany divided into the zip code regions. Given the fact you are a user with intact vision I'd state
that the imagemap solution is, in this case, much more usable and accessible for you. It simply provides more information than just saying, okay...zip code region 7.
It also tells you where the region is located geographical.
Making it accessible
The WCAG 1.0 tells us:
Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Priority 1]
So there are several things you have to pay attention to. First the image itself. Use the alt attribute to
describe the function of the image.
I used the following markup:
<img src="img/plz_karte.png" alt="[Imagemap] Zip code map of Germany" usemap="#plz_karte" />The most forgotten part is probably the map element. Use the title attribute to provide a general idea about the map.
The main benefits of doing so, we'll cover later on.
<map id="plz_karte" title="Map of Germany, divided in zip code regions">Finally, you have to specify the alt attribute of every area element. You can add a title as well, if you
feel like adding a bit flavour or if you want a tooltip to appear if you are hovering the areas.
<area accesskey="6" alt="zip region 6" title="zip region 6" shape="poly" coords="47,418" href="region_6.htm" />Please note that I shortened the coords in the snippet above. Besides I assigned an accesskey to every area element,
which is (surprise, surprise) actually working in most modern browsers I tested it.
So we are now having something like:
<img src="img/plz_karte.png" alt="[Imagemap] Zip code map of Germany" usemap="#plz_karte" />
<map id="plz_karte" name="plz_karte" title="Map of Germany, divided in zip code regions">
<area accesskey="6" alt="zip region 6" title="zip region 6" shape="poly" coords="47,418" href="region_6.htm" />
<-- All other areas here -->
</map>How is it showing up?
Graphical browsers
This is a section of the imagemap as seen in a graphical browser (Opera, Gecko, Internet Explorer etc.)
showing a tooltip, due to the title we specified within the area element.
Text browsers
This was the most interesting part. I tested the imagemap with Lynx. Lynx displays the imagemap as a hyperlink you can activate.
In doing so you are transported to a subpage where Lynx shows a numbered list of links containing every area of your imagemap in the same order you
specified it in your source-code. It displays the alt text of the area element. And this is also the moment
the title attribute of the map element comes into play. Lynx displays it as the page title of this subpage. Fine addition.
Screenreader
Unfortunately, the range of screenreading software i am able to test is quite small at this moment. I tried it with pwWebspeak, but it is only reading out the alternate text of the image. No hint at all, that this could be an imagemap. I'll try to make some tests with other software soon. Watch out for an update at minzweb.
Special cases
Turning off images in graphical browsers
Wow, we are almost there, I thought. But then I turned off images in my graphical browser
(did so with Opera 7.5b, Mozilla 1.5, Internet Explorer 6 and one very old browser (no, I am not saying its name)). The only thing that shows up is the
alternate text of the imagemap itself. None of the specified alts for the areas are displayed. Of course, your cursor is still
turned to a pointer and the tooltip pops up while hovering over the areas, but I expected all alternate texts to appear on screen.
First thing I assumed was, that it could come from the fact I am using rather complicated polygone areas, and the browser just does not know where to display the text. So I tried it with another imagemap, with some huge rectangular areas. Same behaviour. Unbelievable, but true, Internet Explorer is the only browser that displays the dynamic link outlines (for example if you are tabbing through the page). All other tested browsers fail and you have to observe carefully your status bar to see, that you are actually tabbing through hyperlinks.
Now, it can get even more worse. I was following a discussion over at Anne's Weblog about Markup & Style.
He talked about the probable deprecation of width and height attributes in image elements. Well then,
let's just try it out and see what happens. The main difference can only be seen when images are turned off. But then, here we go.
The image is downsized. You have just the alternate text of the image being displayed in a small box. No other whitespace, no areas, no cursor to change to a pointer, no tooltips. Nothing.
I think it is worth an note, that Internet Explorer is nonetheless displaying the dynamic link outlines while you are tabbing through the page
Further notes
Besides all that, I made a test with Opera's Small Screen rendering. The image was downsized, but displayed. Unfortunately, the map areas weren't recalculated, so the whole imagemap was covered by the area of zip code region 2, 3, 4 and 9.
Apart from that, I cannot tell you how imagemaps are treated by Cellphones or PDAs
Conclusion?
Given the somewhat strange behaviour of graphical browsers with images turned off, it seems to be inevitable to provide a fallback solution in the form of redundant text-links which simply duplicates information that is already there. What a pity!
Go figure
I have put up two testfiles for you, so you can run your own tests. Feel free.