Web Accessibility Checker : Check Details

Element

img

Error Type

Known

Guidelines

BITV 1.0 (Level 2)
Level 2
1.5 Until user agents render text equivalents for client-side image map links, provide redundant text links for each active region of a client-side image map.
Section 508
E - text links for server-side image map
WCAG 1.0 (Level AAA)
Priority 3
1.5 Until user agents render text equivalents for client-side image map links, provide redundant text links for each active region of a client-side image map.

Requirement

All links in all client side image-maps are duplicated within the document.

Error

Client-side image map missing duplicate text links.

Short Description

img element must not contain a usemap attribute unless all links in the MAP are duplicated within the document. The MAP element is referred by the USEMAP element's usemap attribute. Links within MAP are referred by area elements href attribute contained by MAP element. [Editor's Note - can duplicate links appear anywhere within content or must they be part of a link group?]

Rationale

Some people may not be able to access the links that are part of an image map. They require a duplicate set of links.

How To Repair

For each area element in an image-map, provide an equivalent anchor on the page. The anchor must have an href attribute set to the same value as the area element's href attribute. The anchor's text should be the same as the area element's Alt text.

Steps To Check

Procedure

1. Check each img element that contains a usemap attribute.
2. Find the MAP element that is referred by the usemap attribute.
3. Check if each area element in the MAP contains a duplicate link in the document.

Expected Result

1. All links in all client side image-maps are duplicated within the document.

Failed Result

1. Add a set of text links that duplicate the text links in the image map.

Examples

Pass Examples

img element has usemap and equivalent text links.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>OAC Testfile - Check #13 - Negative</title>
</head>
<body>
<p><map name="imagemap" id="map1">
<area shape="poly" coords="185,0,355,0,295,123" href="horses.html" alt="horses"/>
<area shape="poly" coords="336,202,549,203,549" href="dogs.html" alt="dogs"/>
<area shape="rect" coords="0,10,172,10" href="birds.html" alt="birds"/>
</map></p>

<p><img src="navigation.gif" usemap="#imagemap" alt="navigation"/></p>

<p><a href="horses.html">Horses</a> | <a href="dogs.html">Dogs</a> | <a href="birds.html">Birds</a></p>
</body>
</html>

Fail Examples

img element has usemap but is missing all text links.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>OAC Testfile - Check #13 - Positive</title>
</head>
<body>
<p><map name="imagemap" id="map1">
<area shape="poly" coords="185,0,355,0,295,123" href="horses.html" alt="horses"/>
<area shape="poly" coords="336,202,549,203,549" href="dogs.html" alt="dogs"/>
<area shape="rect" coords="0,10,172,10" href="birds.html" alt="birds"/>
</map></p>

<p><img src="navigation.gif" usemap="#imagemap" alt="navigation"/></p>

</body>
</html>