Web checklist

Checkpoint 2.4f: Link Purpose

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.


Rationale

When possible, Web application or Web site links should have link text that describes their purpose. Screen reader users often navigate using a list of links or by tabbing. If a link appears in the list that announces, for example, "here", a blind user cannot determine where "here" links to. This problem also occurs when the user tabs to a non-descriptive link.

When it is not possible to provide descriptive text in links, provide links that are logically associated with surrounding text (sentences, paragraphs, lists, headings). Ideally, descriptive text should appear before a link, so that a screen reader user can read a page sequentially and hear the link context before encountering the link. In other words, 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 and unit test techniques


To comply with this checkpoint, you must meet at least one of the following techniques. These techniques are defined in WCAG 2.0 Level A Success Criterion 2.4.4 (link resides outside of ibm.com).

  1. Provide descriptive link text: Provide link text that describes the purpose of a link.
  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.

Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.

General examples

  1. Provide descriptive link text: Provide link text that describes the purpose of a link.

    There are no general examples for implementing this technique.

  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, you must implement the following example.

    General example 1

    Identify the purpose of a link using link text combined with the text of the enclosing sentence. 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, because the necessary information precedes the link in the same sentence, the user can determine the purpose of the link.

    To create an account, click here.

    For additional information, refer to the WCAG 2.0 examples of using link text in a sentence the identifies its purpose (link resides outside of ibm.com).

    Required unit tests for general development technique 2

    Manually perform the following unit test.

    • Identify links and confirm that the link text combined with the text of its enclosing sentence describes the purpose of the link.
  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 general examples for implementing this technique. Use the CSS examples as a guide.

 

HTML examples

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, you must implement at the following example.

    HTML example 1

    Provide link text that describes the purpose of a link for anchor elements. Adding link text that describes its purpose provides the necessary information for the user 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 additional information, refer to the WCAG 2.0 examples of providing link text that describes the purpose of a link (link resides outside of ibm.com).

    Required unit tests for HTML development technique 1

    Manually perform the following unit tests.

    • Identify links and confirm that text of the link describes the purpose of the link.
    • 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.
  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, you must implement one or more of the following examples.

    HTML example 2

    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 links following the descriptive heading provide context for screen reader users.

    <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 additional information, refer to the WCAG 2.0 examples of identifying the purpose of a link using link text combined with the preceding heading element (link resides outside of ibm.com).

    HTML example 3

    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 lists cars for sale by price and market segment. The use of descriptive text for the two parent list items, plus the link text in the nested lists, provide context for screen reader users.

    <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>

    HTML example 4

    Identify the purpose of a link using link text combined with its enclosing list item. An earlier example makes clear the purpose of links on the IBM® Lotus® Symphony Web site to screen reader users by hiding supplemental link text.

    This example clarifies the purpose of the same links by grouping the links for IBM Lotus Symphony Documents and IBM Lotus Symphony Presentations under different list items and providing descriptions before the links.

    IBM Lotus Symphony Documents. IBM Lotus Symphony Presentations. Take a Tour. Features. Screenshots

    <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 additional information, refer to the WCAG 2.0 examples of identifying the purpose of a link using link text combined with its enclosing list (link resides outside of ibm.com).

    HTML example 5

    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 additional information, refer to the WCAG 2.0 examples of identifying the purpose of a link using link text combined with its enclosing paragraph (link resides outside of ibm.com).

    HTML example 6

    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 you can code the "Take a Tour", "Features" and "Screenshots" links in a table to provide context for a screen reader user.

    IBM Lotus Symphony Documents. IBM Lotus Symphony Presentations. Take a Tour. Features. Screenshots

    <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 it can be hidden from sighted users using the CSS hiding technique shown earlier on this page.

    For additional information, refer to the WCAG 2.0 examples of 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).

    Required unit tests for HTML development technique 2

    Manually perform the following unit test.

    • Identify links and confirm that text of the link combined with the link context describes the purpose of the link. For example, text from a preceding header, parent list or enclosing list.
  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 examples for implementing this technique in HTML. Use the CSS examples as a guide.

 

Script examples

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.

    To comply with this technique, you must implement the following example.

    Script example 1

    Allow the user to choose short or long link text using JavaScript® to change the link text.

    For additional information, refer to the WCAG 2.0 examples for using scripts to change the link text (link resides outside of ibm.com).

    Required unit tests for script development technique 1

    Manually perform the following unit tests.

    • Identify links in the content,
    • For any links in which the link text does not describe its purpose, confirm that a link is provided, which, when activated, allows the user to add additional link text so the links can be understood out of context.
  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 implementing this technique in Script. Use the HTML examples as a guide.

  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 implementing this technique in Script. Use the CSS examples as a guide.

 

CSS examples

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 implementing this technique in CSS. Use the HTML examples as a guide.

  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 implementing this technique in CSS. Use the HTML examples as a guide.

  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, you must implement the following example.

    CSS example 1

    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 to tour a particular tool or see features and screenshots. However, screen reader users may be confused about which tool the repeated links are referencing.

    IBM Lotus Symphony Documents. IBM Lotus Symphony Presentations. Take a Tour. Features. Screenshots

    To help screen reader users identify the purpose of the links, <span> elements containing supplemental text are embedded describing which tool the links are referencing. 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 because these properties hide content from screen readers.

    For additional information, refer to the WCAG 2.0 examples of using CSS to hide a portion of the link text (link resides outside of ibm.com).

    Required unit tests for CSS development technique 3

    Manually perform the following unit test with a screen reader.

    Note for iOS platform: Perform the test with mobile Safari/VoiceOver.

 

Recommended development techniques

Although you do not have to implement the recommended techniques in order to comply with this checkpoint, you should review them because they can improve the accessibility and usability of the application.

  1. Use the WAI-ARIA aria-describedby property to provide supplemental information about a link.
  2. Include an application role on rich Internet widget elements in which a Web application should control key navigation. For example:

<body role="application">

See Set the Application Role in the WAI-ARIA Best Practices for more information on where to use the application role.

 

©2013 IBM Corporation

Last updated January 1, 2013.

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.