universal-design-center

  • image map

Web Accessibility Criteria - Image Maps

  Description

An image map is an image that uses actionable “hotspots” or regions like links that can direct a user to various resources or perform an action. Image maps must have alternative text to alert users what resources the links will direct them to or what action will be executed when a hotspot is activated. The hotspots are determined using x and y coordinates. Within those coordinates, is a link or function that will be enabled when the user activates the hot spot.

Server-side image maps are used to identify images within an image map based on shape.

Client-side image maps allow users to map coordinates from the image map into the HTML page which can then be handled by the browser of a person viewing the page.

Design images maps in a way that allows users to navigate to all actionable regions of the image map while at the same time providing them with text alternatives to all these areas. 

  Why are image maps important?

Image maps increase the user’s interaction within the webpage. Ensuring accessibility will allow keyboard users, assistive technology users and other types of users to interact with the content.

Section 508/ WCAG 2.0 Summary of Requirement

All image maps should have alternative text. An image map allows users to interact with the map to obtain information or perform an action. There are two types of image maps; a client-side image map is defined using the usemap attribute within an IMG element. A server-side image map is not accessible via keyboard and should not be used. The image maps and its regions must be described with alternative text. 

Best Practices

The best practices for accessible image maps are the following: 

  • Client-side image maps are the preferred method for image maps. Client-side image maps are keyboard accessible. Server-side image maps should only be used if it is not possible to define the interactive regions on the image map.
  • Keyboard focus should be provided in-between the image’s regions to help users navigate through the image.
  • When using a client-side image map, users should:
    • Include alternative text for each region in the image map
    • There should not be an ISMAP attribute within an Input or img element. This will make the client-side image map to be inaccessible via keyboard 

Examples

Below is an image map of CSUN main departments. Each section of the image links to different CSUN websites.

csun mapCSUN AthleticsAdmissionsStudentsFinancial Aid

 

How to Test

Automated Testing Tools

WebAIM WAVE tool

Activate the WAVE toolbar and navigate to the “Details” panel. In that panel navigate to the “Features” section and manually review all the image maps’ alternative text that is present in the webpage.

The following accessibility errors related to image maps are found by wave:

    • Image map area missing an alternative text 
    • Alternative text is not present for an image that has hotspots. 
    • Alternative text is not present for an image map area (hotspot).
    • A server-side image map is present 

Compliance Sheriff

Use the following image maps checkpoints in Compliance Sheriff: Section F for client-side image maps and Section E for server-side image maps For more information regarding the checkpoints visit the CSU ATI Accessibility Requirements page. 

Resources