Different link targets

(Referring UWEM Test: 13.1_HTML_01)

Test info

Failure cause

Different link targets for the same title and text found.

The inspected a or area element has the same target information (element text, title or alt attribute) as another a or area element in the (X)HTML resource but a different link
target (href attribute).

Why this may be a barrier

Clear link titles are helpful for all users to decide whether they want to follow a link and are essential for screen reader users, who will often review the list of links on a page before investing the time to read through the content in detail - the equivalent of visually scanning a page to get an overview. Because the list of link titles are read out of context, it is important to provide link titles that do not require the user to read the surrounding information.

Good Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head><title>Sample: Page with correct title and element text</title></head>
<body>

<p>
Presidential election<br>
<a href="news1.html">Read "Presidential election"</a>
</p>
<p>
Global warming<br>
<a href="news2.html">read "Global warming"</a>
</p>
<p>
Nobel Peace Price<br>
<a href="news3.html">read "Nobel Peace Price"</a>
</p>

</body>
</html>

Solution

Write clear and meaningful link titles which make sense when read out of context and avoid using the same title for two or more links that point to different places.
Also see W3: HTML Techniques for WCAG 1.0 – Link text

References

Related WCAG 1.0 Checkpoint

13.1

"Clearly identify the target of each link." [Priority 2]
WCAG 1.0 Checkpoint 13.1

Referring UWEM Test

13.1_HTML_01

This test is targeted to find elements with the same title and text with different link targets. If no title attribute is provided, only the element text is checked.

Examples

  • Finding meaningful link texts

    Linked texts should always be meaningful and indicate the content of the linked page clearly, so that it is clear to the users where a link will take them. In particular, this is essential for e.g. blind users who often navigate by means of a list of all links on a web page.

    Bad example:
    <body>
    <p>
    Presidential election<br>
    <a href="news1.html">read more</a>
    </p>
    <p>
    Global warming<br>
    <a href="news2.html">read more</a>
    </p>
    </body>
    Good example:
    <body>
    <p>
    Presidential election<br>
    <a href="news1.html">Read all about "Presidential election"</a>
    </p>
    <p>
    Global warming<br>
    <a href="news2.html">Read all about "Global warming"</a>
    </p>
    </body>
    Questions, suggestions, objections? Give us feedback!
  • Using linkeGGd images

    If you are using icons or other images as links, set the title attribute of the links to indicate the content of the linked page clearly.

    Bad example:
    <body>
    <p>
    Max Mustermann
    <a href="mailto:max.mustermann@mymunicipality.com"   >
    <img src="images/email.gif" width="25" height="25" alt="email symbol" />
    </a>
    </p>
    <p>
    Anna Bestcase
    <a href="mailto:anna.bestcase@mymunicipality.com"   >
    <img src="images/email.gif" width="25" height="25" alt="email symbol" />
    </a>
    </p>
    </body>
    Good example:
    <body>
    <p>
    Max Mustermann
    <a href="mailto:max.mustermann@mymunicipality.com" title="Email Max Mustermann" >
    <img src="images/email.gif" width="25" height="25" alt="email symbol"/>
    </a>
    </p>
    <p>
    Anna Bestcase
    <a href="mailto:anna.bestcase@mymunicipality.com" title="Email Anna Bestcase" >
    <img src="images/email.gif" width="25" height="25" alt="email symbol"/>
    </a>
    </p>
    </body>
    Questions, suggestions, objections? Give us feedback!
Questions, suggestions, objections? Give us feedback!
show exampleshow
hide examplehide