skip to main content

Jim Byrne Accessible Website Design Glasgow for The Third Sector, Voluntary, Charities and Not for Profits

Accessible design for the Third Sector
Creating inclusive websites since 1996
Jim Byrne Web Designer

How to make client-side image maps accessible

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.

Related content

Written by :

Avatar of JamesByrne

Give me a phone if you would like me to test the accessibility of your website:

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