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
- Functionalities of the image maps are available to the screen reader users the redundant text links.
- The
alt
attributes of the client-side image maps help identify the targets of the image map links if and when the browser renders thealt
attribute forarea
elements.
Benefits to All Users
- Users of technologies that do not support images can access the link on the image maps through the redundant text links.
Benefits to Developers
- Using link text that indicates the target of a link makes it easier to find and update links on web resources.
- 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 withinmap
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 renderalt
attribute for thearea
element, making the content inaccessible to many visually impaired users. - img.alt and area.alt
- Any time an
img
orarea
element is used to create a link, thealt
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]