Image Accessibility 101 (8 Part Series)
An image map is an image that contains clickable regions.
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.
<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.
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.