Access 1.5.1.1

From Htmlpedia
Jump to: navigation, search

Access: [1.5.1.1]: image map (client-side) missing text links (Priority 3)

Cause:

Client-side image maps also include redundant text links to ensure users will be able to navigate through a site. When creating redundant text links for image maps, create text that identifies the destination of each link (i.e. Home Page, Search Engine, etc.)

Example:

Bad
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
<title>aert1.0/1.5.1</title>
</head>
<body>
<map name="imagemap">
<area shape="poly" coords="185,0,355,0,295,123" href="a.html" alt="Link a"/>
<area shape="poly" coords="336,202,549,203,549" href="b.html"/>
<area shape="rect" coords="0,10,172,10" href="c.html" alt="Service"/>
</map>

<img src="imap.jpg" usemap="#imagemap" alt="navigation" longdesc="ld.html"/>
</body>
</html>
Good
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
<title>aert1.0/1.5.1</title>
</head>
<body>
<map name="imagemap">
<area shape="poly" coords="185,0,355,0,295,123" href="a.html" alt="Link a"/>
<area shape="poly" coords="336,202,549,203,549" href="b.html" alt="Link b"/>
<area shape="rect" coords="0,10,172,10" href="c.html" alt="Service"/>
</map>

<img src="imap.jpg" usemap="#imagemap" alt="navigation" longdesc="ld.html"/>
</body>
</html>

Solution:

References: