Element

a

Error Type

Known

Guidelines

Requirement

There are no adjacent text and image links having the same destination.

Error

Adjacent text and image link have the same destination.

Short Description

This objective of this technique is to avoid unnecessary duplication that occurs when adjacent text and iconic versions of a link are contained in a document.

How To Repair

Put the text and image together in one link, and provide null alternative text on the image to eliminate duplication of text.

Repair Example

<a href="foo.htm"><img src="house.gif" alt="home page icon"/>Go to the home page</a>

Steps To Check

Procedure

1. Check each a element in the document that contains an img element.\r\n2. Check if there is an adjacent a element with the same href attribute value.\r\n3. Note that the adjacent a element may be in an adjacent table cell.

Expected Result

1. There are no adjacent text and image links having the same destination.

Failed Result

1. Place the text and image together in one link, and provide null alternative text on the image to eliminate duplication of text.

Examples

Pass Examples

Text and image are combined into one link.
<?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>Testfile - Check #236.2 - Negative</title>
</head>
<body>
<p>
<a href="products.html"><img src="icon.gif" alt="" />Products page</a>
</p>
</body>
</html>

Fail Examples

Adjacent text and image links with the same destination and duplicate text.
<?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>Testfile - Check #236.1 - Positive</title>
</head>
<body>
<p>
<a href="products.html"><img src="icon.gif" alt="Products page" /></a>
<a href="products.html">Products page</a>
</p>
</body>
</html>

English | German | Italiano


Web site engine's code is copyright © 2011
Inclusive Design Institute
Web Service API