The purpose of each link can be determined from the link text alone, or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
On this page:
Rationale
When possible, Web application or Web site links should have link text that describes their purpose. Users sometimes navigate using a list of links presented by a screen reader or by tabbing. If a link in the list says, for example, "here", a blind user doesn't know where "here" will take him. The same problem occurs when tabbing to a non-descriptive link.
When it isn't possible to provide descriptive text in links, provide links that are logically associated with surrounding text (e.g., sentences, paragraphs, lists, headings, etc.). Ideally, descriptive text should appear before a link so that a screen reader user reading a page sequentially hears the link context before encountering the link. The key point is that a screen reader user must be able to determine the purpose of a link from the surrounding text without having to move focus away from the link.
An exception to the above requirements is granted in cases where the purpose of a link cannot be determined from information on a page. For example, a game may create suspense for all users by presenting links with no indication of what the links will do until activated. However, if any link context is provided, it must be made available in the link text or programmatically associated with the link.
Required development techniques
Compliance with this checkpoint requires all of the following techniques to be met. These techniques are defined in the WCAG 2.0 Level A Success Criterion for Guideline 2.4.4 (link resides outside of ibm.com).
1. Provide descriptive link text: Provide link text that describes the purpose of a link.
Note: This is the preferable method of providing descriptive links since context does not need to be drawn from surrounding text or structure.
2. Identify the purpose of a link using enclosing sentence: Identify the purpose of a link using link text combined with the text of the enclosing sentence.
3. Identify the purpose of a link programmatically: Identify the purpose of a link using link text combined with programmatically determined link context.
Examples for General developers
1. Provide descriptive link text: Provide link text that describes the purpose of a link.
There are no specific examples for General developers.
2. Identify the purpose of a link using enclosing sentence: Identify the purpose of a link using link text combined with the text of the enclosing sentence.
To comply with this technique, the following example must be implemented.
Example 1
This example shows a link that by itself does not provide enough information to a screen reader user to determine the purpose of the link. However since the information needed precedes the link in the same sentence, the purpose of the link can be determined.
To create an account, click here.
For more examples refer to WCAG Identifying the purpose of a link using link text combined with the text of the enclosing sentence (link resides outside of ibm.com).
3. Identify the purpose of a link programmatically: Identify the purpose of a link using link text combined with programmatically determined link context.
There are no specific examples for General developers.
Examples for HTML developers
For techniques that have no technology-specific examples, refer to the General example section for guidance.
1. Provide descriptive link text: Provide link text that describes the purpose of a link.
To comply with this technique, at least one of the following examples must be implemented.
Example 2
Provide link text that describes the purpose of a link for anchor elements. Providing link text that describes its purpose provides information needed in order to determine whether to follow the link. The following example provides descriptive link text to a Web site registration page.
<a href="register.html"> Register for free access to this site </a>
For more examples, refer to WCAG Providing link text that describes the purpose of a link (link resides outside of ibm.com).
2. Identify the purpose of a link using enclosing sentence: Identify the purpose of a link using link text combined with the text of the enclosing sentence.
There are no specific examples for HTML developers.
3. Identify the purpose of a link programmatically: Identify the purpose of a link using link text combined with programmatically determined link context.
To comply with this technique, all of the following examples must be implemented.
Example 3
Identify the purpose of a link using link text combined with the preceding heading element. The following example from a merchant Web site shows items on sale. The descriptive heading provides context for the links that follow it.
<h2>Items on sale this week</h2> <p> <a href="golfclubs.html">Golf clubs</a> <a href="bikes.html">Bicycles</a> <a href="canoes.html">Canoes</a> </p>
For more examples refer to WCAG Identifying the purpose of a link using link text combined with the preceding heading element (link resides outside of ibm.com).
Example 4
Identify the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested. The following example from a car dealer Web site list cars for sale by price and market segment. The use of descriptive text for the two parent list items provide context for the links that follow them.
Note: Use of this method requires screen reader users to navigate the list one item at a time. It is not recommended for very long or deeply nested lists.
<ul> <li>Cars for sale by price <ul> <li><a href="fifteen.html">$15,000 to $25,000</a></li> <li><a href="twentyfive.html"></a>$25,000 to $35,000</li> <li><a href="thirtyfive.html"></a>$35,000 to $45,000</li> </ul> </li> <li>Cars for sale by market segment <ul> <li><a href="hybrid.html">hybrid</a></li> <li><a href="diesel.html"></a>diesel</li> <li><a href="flexfuel.html"></a>flex fuel</li> </ul> </li> </ul>
Example 5
Identify the purpose of a link using link text combined with its enclosing list item.
This example makes the purpose of links clear by grouping the links for IBM® Lotus® Symphony Documents and IBM Lotus Symphony Presentations under different list items and providing descriptions before the links.
<ul> <li> IBM Lotus Symphony Documents <a target="_blank" href="#">Take a Tour</a> <a target="_blank" href="#">Features</a> <a target="_blank" href="#">Screenshots</a> </li> <li> IBM Lotus Symphony Presentations <a target="_blank" href="#">Take a Tour</a> <a target="_blank" href="#">Features</a> <a target="_blank" href="#">Screenshots</a> </li> </ul>
For more examples refer to WCAG Identifying the purpose of a link using link text combined with its enclosing list (link resides outside of ibm.com).
Example 6
Identify the purpose of a link using link text combined with its enclosing paragraph. The following example identifies the purpose of a link using the enclosing paragraph text.
<h3>Commodity news</h3>
<p>
Oil prices fall for fifth day, boosting airline sector.
<a href="oilNews.html">[Read more...]</a>
</p>
For more examples, refer to WCAG Identifying the purpose of a link using link text combined with its enclosing paragraph (link resides outside of ibm.com).
Example 7
Identify the purpose of a link using link text combined with its enclosing table cell and associated table headings. Continuing with the earlier Lotus Symphony Web site example, the following example shows how the "Take a Tour", "Features" and "Screenshots" links may be coded in a table to provide context for a screen reader user.
<table border=1> <tr><th>IBM Lotus Symphony Documents</th><th>IBM Lotus Symphony Presentations</th></tr> <tr><td>Take a Tour</td><td>Take a Tour</td></tr> <tr><td>Features</td><td>Features</td></tr> <tr><td>Screenshots</td><td>Screenshots</td></tr> </table>
The table may be provided as supplemental information for screen reader users and hidden from sighted users by using the CSS hiding technique show earlier on this page.
For more examples refer to WCAG Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings (link resides outside of ibm.com).
Examples for Script developers
For techniques that have no technology-specific examples, refer to the General and HTML example sections for guidance.
1. Provide descriptive link text: Provide link text that describes the purpose of a link.
Example 8
Allow the user to choose short or long link text using JavaScript to change the link text.
For examples, refer to WCAG 2.0 examples for using scripts to change the link text (link resides outside of ibm.com).
2. Identify the purpose of a link using enclosing sentence: Identify the purpose of a link using link text combined with the text of the enclosing sentence.
There are no specific examples for Script developers.
3. Identify the purpose of a link programmatically: Identify the purpose of a link using link text combined with programmatically determined link context.
There are no specific examples for Script developers.
Examples for CSS developers
For techniques that have no technology-specific examples, refer to the General and HTML example sections for guidance.
1. Provide descriptive link text: Provide link text that describes the purpose of a link.
There are no specific examples for CSS developers.
2. Identify the purpose of a link using enclosing sentence: Identify the purpose of a link using link text combined with the text of the enclosing sentence.
There are no specific examples for CSS developers.
3. Identify the purpose of a link programmatically: Identify the purpose of a link using link text combined with programmatically determined link context.
Example 9
Use CSS to hide a portion of the link text. The following example shows a screenshot from the Lotus Symphony Web site. Under each tool, the following links appear: "Take a Tour", "Features" and "Screenshots". A sighted user can quickly determine which links to click in order to tour a particular tool or see features and screen shots. However, screen reader users may be confused about which tool the repeated links refer to.
To help screen reader users identify the purpose of the links, span elements containing supplemental text are embedded to describe which tool the links refer to. The ibm-access class hides the text in the span elements from sighted users. However, screen readers will read the text.
<a target="_blank" href="#"><span class="ibm-access">IBM Lotus Symphony Documents,</span>Take a Tour</a>
<a target="_blank" href="#"><span class="ibm-access">IBM Lotus Symphony Documents,</span>Features</a>
<a target="_blank" href="#"><span class="ibm-access">IBM Lotus Symphony Documents,</span>Screenshots</a>
<a target="_blank" href="#"><span class="ibm-access">IBM Lotus Symphony Presentations,</span>Take a Tour</a>
<a target="_blank" href="#"><span class="ibm-access">IBM Lotus Symphony Presentations,</span>Features</a>
<a target="_blank" href="#"><span class="ibm-access">IBM Lotus Symphony Presentations,</span>Screenshots</a>
The ibm-access class is defined as follows:
<style type="text/css">
.access {
position:absolute;
left: -3000 px;
width: 500 px;
}
</style>
Note: Do not use visibility:hidden or display:none since these properties also hide the content from screen readers.
For more examples refer to WCAG Using CSS to hide a portion of the link text (link resides outside of ibm.com).
Recommended development techniquess
Implementation of recommended techniques is not required to comply with this checkpoint, but these techniques should be reviewed since they can improve the accessibility and usability of the application.
1. Use the WAI-ARIA aria-describedby (link resides outside of ibm.com) property to provide supplemental information about a link.
Required test techniques
The following test tools and techniques are required to test this checkpoint.
Test tools:
Install the following tools to test this checkpoint:
Required accessibility verification test techniques:
Use the following accessibility verification test (AVT) techniques to validate the Web content. It is recommended that these tests be performed in order.
| Action | Result | |
|---|---|---|
|
Verify the following compliance criteria with a screen reader.
For detailed instructions on how to test this checkpoint with a screen reader follow the 'Screen reader accessibility verification tests for Web checklist 5.1' document. |
Pass:
|
®2009 IBM Corporation
Last updated September 01, 2009.
W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.