Image Accessibility 101: Image Maps

An image map is an image that contains clickable regions.

Tips for writing the alt text:

1) This type of image also requires a two part description, one for the entire image and another for each clickable region.

2) Inside the image's alt attribute is where the basic description for the entire image would go.

3) Each clickable region is also given its own alt attribute, which would contain a description of what will happen or where they will be taken when they click on that region of the image.

Examples:

<img 
    src="img/orgchart-b583d8ff.png" 
    alt="Board of directors and related staff: " 
    usemap="#Map" 
/>

<map name="Map" id="Map">
    <area
        shape="rect"
        coords="176,14,323,58"
        href="chairman.html"
        alt="Davy Jones: Chairman"
    >
    <area 
        shape="rect" 
        coords="81,75,226,114" 
        href="secretary.html"
        alt="Carole Brewster: Company Secretary"
    >
    <area 
        shape="rect" 
        coords="6,138,155,182" 
        href="marketing-director.html"
        alt="Henry H Brown: Marketing Director (reports to chairman)"
    >
    <area 
        shape="rect"
        coords="175,138,323,182"
        href="sales-director.html"
        alt="Paula Holbein: Sales Director (reports to chairman)"
    >
    <area
        shape="rect" 
        coords="345,136,496,186" 
        href="finance-director.html"
        alt="Hugh Howard: Finance Director (reports to chairman)"
    >
</map>

The above example is of a company's organizational chart that shows all the people by name, position, and how their roles are related to each other. In the image, the regions for each person in the chart is a clickable element that would bring the user to that person's biography.

The image's first alt text explains that the image is an organizational chart for a company's board of directors and related staff, while each clickable region relays to the user that person's name, role, and if they report to anyone.

Summary

Image maps are images that contain clickable regions. These images also need a two part description: one for the entire image as a whole and a second for each clickable area inside the image. The descriptions given to each clickable region should explain what will occur or where they will go when they click on the link.