Imagemaps: Core guidance - if used in website

Checklist

* Always use a client-side map
* The ‘usemap’ attribute must be added to your imagemap graphic
* An ‘alt’ attribute and value reflecting its contents must be added to each button
* The text alternative to the imagemap should be visible beside or underneath the imagemap graphic
* Any text within the imagemap graphic must be clearly legible against its background colour

Summary

Navigation to pages can be achieved by using one large graphic.

Areas within this graphic can then be designated as live by using the ‘map’ tag and x and y co-ordinates.

These imagemaps can be appealing on a web page but are next to useless if the user is visually impaired. This does not mean they shouldn’t be used, it just means alternatives should be offered.

Implementation

However visually appealing this method of navigation may look; it should only be used sparingly in the website.

There are basically two forms of imagemap, both of which have names that describe how they work, server-side and client-side. The client-side imagemap is the more flexible and therefore the version that must be used.

Server-side imagemaps

Server-side imagemaps are the older variety that will only work if the browser is connected to the Internet at the time the hot spot is selected. Each click on the image will result in a transaction between the user’s browser and the
content provider’s website. This is relatively inflexible and has been overtaken by client-side imagemaps.

Client-side imagemapes

These were developed by Netscape in 1996 and do not require any interaction between the page and the originator’s website once the page has been loaded to the user’s browser. They can be used offline because all of the co-ordinates
are contained within the HTML page.

HTML authors should be aware that some early browsers do not support client-side imagemaps and may wish to include server-side imagemaps as well to cater for them. Browsers that can use client-side imagemaps will use them in preference to server-side ones if both are provided.

When an imagemap is used, a text alternative should be supplied alongside the graphic in question. This text must be formatted using Cascading Style Sheets and must be clearly legible against the page’s background colour.

It is essential that each designated area within the client-side imagemap be given an ‘alt’ attribute with a value that describes the link. This is useful to all users. There is an accessibility requirement to provide a text alternative.