Image Map Overview

Overview

Client-side and server-side image maps need redundant text links; no major graphical browser provides access to the alt attribute of the area element for client-side image maps, and server-side image maps have no ability to identify links from the browser. For client-side image maps, in addition to the redundant text links, the alt attribute should still be provided for each of area elements with the destination of the link as the content.

Benefit to People with Disabilities

  1. Functionalities of the image maps are available to the screen reader users the redundant text links.
  2. The alt attributes of the client-side image maps help identify the targets of the image map links if and when the browser renders the alt attribute for area elements.

Benefits to All Users

  1. Users of technologies that do not support images can access the link on the image maps through the redundant text links.

Benefits to Developers

  1. Using link text that indicates the target of a link makes it easier to find and update links on web resources.
  2. Search engines have more accurate information on the content of the link for generating search results.

HTML Markup Details

map
The map element is often used to create navigation bars.
area
The area element is used within map elements to create areas within images that activate links.
Links created using the area element must have redundant text links since none of the major graphical browsers render alt attribute for the area element, making the content inaccessible to many visually impaired users.
img.alt and area.alt
Any time an img or area element is used to create a link, the alt attribute content should not describe the image but instead describe the target of the link. alt attribute content can be used by screen readers or rendered instead of the image by some graphical browsers to improve access to screen reader users and visually impaired users.

Related Accessibility Requirements

Illinois Information Technology Accessibility Standards
4.1 Provide appropriate "alternate text" for all images.
4.2 Provide full descriptions for graphs, diagrams, and other meaningful images.
Section 508
1194.22 (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
1194.22 (e) Redundant text links shall be provided for each active region of a server-side image map.
1194.22 (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
W3C Web Content Accessibility Guidelines 2.0
1.1.1 Non-text Content
Web Content Accessibility Guidelines (WCAG 1.0)
1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content) [Priority 1].
1.2 Provide redundant text links for each active region of a server-side image map. [Priority 1]
9.1 Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape. [Priority 1]
13.1 Clearly identify the target of each link. [Priority 2]