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.
Top comments (0)