Techniques for WCAG 2.0

On this page:

-

# H80: Identifying the purpose of a link using link text combined with the preceding heading element

## Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))

## User Agent and Assistive Technology Support Notes

The command to take advantage of this technique in JAWS is "JAWS KEY + T".

## Description

The objective of this technique is to describe the purpose of a link from the context provided by its heading context. The preceding heading provides context for an otherwise unclear link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link.

Note: Whenever possible, provide link text that identifies the purpose of the link without needing additional context.

## Examples

### Example 1: Blocks of information on hotels

The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.

Example Code:

    <h2><a href="royal_palm_hotel.html">Royal Palm Hotel</a></h2>
      <ul class="horizontal">
        <li><a href="royal_palm_hotel_map.html">Map</a></li>
        <li><a href="royal_palm_hotel_photos.html">Photos</a></li>
        <li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
        <li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
        <li><a href="royal_palm_hotel_book.html">Book now</a></li>
      </ul>

    <h2><a href="hotel_three_rivers.html">Hotel Three Rivers</a></h2>
      <ul class="horizontal">
        <li><a href="hotel_three_rivers_map.html">Map</a></li>
        <li><a href="hotel_three_rivers_photos.html">Photos</a></li>
        <li><a href="hotel_three_rivers_directions.html">Directions</a></li>
        <li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
        <li><a href="hotel_three_rivers_book.html">Book now</a></li>
      </ul>

### Example 2: A document provided in three formats

Example Code:

    <h2>Annual Report 2006-2007</h2>
    <p>
      <a href="annrep0607.html">(HTML)</a>&nbsp;
      <a href="annrep0607.pdf">(PDF)</a>&nbsp;
      <a href="annrep0607.rtf">(RTF)</a>
    </p>

### Example 3: Newspaper Web site

Example Code:

    <h2><a href="Stockmarket_05052007.htm>Stock market soars as bullishness prevails</a></h2>
    <p>this week was a stellar week for the stock market as investing in gold rose 2%.
    <a href="Stockmarket_05052007.htm>More here</a></p>

## Resources

No resources available for this technique.

## Related Techniques

- G91: Providing link text that describes the purpose of a link
- G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence
- H33: Supplementing link text with the title attribute
- C7: Using CSS to hide a portion of the link text
- H77: Identifying the purpose of a link using link text combined with its enclosing list item
- H78: Identifying the purpose of a link using link text combined with its enclosing paragraph
- H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings
- H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested

## Tests

### Procedure

For each link in the content that uses this technique:

1. Find the heading element that precedes the link

2. Check that the text of the link combined with the text of that heading describes the purpose of the link.

### Expected Results

- #2 is true.

- Top
- Contents
- Intro
- Previous: Technique H79
- Next: Technique H81