An image map, as its name suggests, is a kind of context-sensitive image that, depending on where the reader clicks, touches or otherwise actives it, results in a unique operation being performed. Image maps are commonly used to make two-dimensional images dynamic, to provide more information about points on an infographic, etc.
Client-side v. Server-side
There are two ways to create maps: locally using the
usemap attribute to reference a
map element that defines the clickable region; and remotely by enclosing the image in an
a tag and setting the
ismap attribute on the
Server-side maps are inherently less accessible, both because they require that the reader be able to see the image to discern the regions and also because they require that the reader be able to click on the image in an exact spot.
Client-side maps make use of an associated
map element to define the clickable regions. Each
region is specified in an
area element, and each
area should include an
alt attribute that indicates its purpose so that non-visual readers can easily discover
the functionality. Assistive technologies allow readers to iterate over these areas, making them a much
friendlier option than server-side maps, and without requiring intrusive fallbacks.
In fact, server-side maps provide no additional functionality, so their use is never recommended. If one must be used, a set of links corresponding to each clickable region should be provided so that readers who cannot interact with the map have equal access to the functionality.
Note that maps of either kind should never be used when a better alternative is available (e.g., to make an image of text linkable).