Although client-side images are preferred over server-side image maps – as equivalent text can be provided for each image map ‘hot-spot’ – server-side image maps are sometimes necessary. For example, a server side image can be used when the active regions of a client-side image map cannot be easily defined using an available geographic shape. In such cases the answer is to provide redundant text links relating to each link provided by the server side image map.
The following markup example is typical of the code used to reference a server side image map.
<a href="/cgi-bin/mymap.map"> <img ismap src="imagemap.gif" > </a>
The web pages accessed by the clicking the mage map in the above example would be completely hidden to someone using a screen reader or a text-only web browser, as there is no alternative way of accessing the links provided.
An example of the server side image with alt attribute added and an alternative set of links to the same content:
<a href="/cgi-bin/mymap.map"> <img ismap src="imagemap.gif" alt="Alternative text links are provided at the foot of the page."> </a>
You then make the following links available at the foot of the page,
<p><a href="about.html">About Us</a> | <a href="research.html">Research</a> </p>
As you can see in the example above the alt attribute provided information about where to find the text based links. The alternative text based links provided at the bottom of the page imply that the image map has two hot-spots, one to find information about the organisation and another for information related to research.
I provided feedback on the WCAG 2 (as representative of Guild of Accessible Website Designers) have two decades of experience and worked with hundreds of organisations.
07810 098 119