Techniques for WCAG 2.0

On this page:

-

# 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

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

Although the context information is programmatically associated with the link, assistive technology lacks commands for reading the parent list item without moving focus away from the link.

## Description

The objective of this technique is to describe the purpose of a link in a nested list from the context provided by the list item under which the list is nested. This list item 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.

Because current assistive technologies do not include commands to query information contextual information provided by parent list items, use of this technique requires users to navigate the list one item at a time. Therefore, this technique may not be appropriate for very long or deeply nested lists.

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

## Examples

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

Example Code:

    <ul>
    <li>Annual Report 2005-2006
      <ul>
      <li><a href="annrep0506.html">(HTML)</a></li>
      <li><a href="annrep0506.pdf">(PDF)</a></li>
      <li><a href="annrep0506.rtf">(RTF)</a></li>
      </ul>
    </li>
    <li>Annual Report 2006-2007
      <ul>
      <li><a href="annrep0607.html">(HTML)</a></li>
      <li><a href="annrep0607.pdf">(PDF)</a></li>
      <li><a href="annrep0607.rtf">(RTF)</a></li>
      </ul>
    </li>
    </ul>

### Example 2: 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:

    <ul>
    <li><a href="royal_palm_hotel.html">Royal Palm Hotel</a>
      <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>
    </li>
    <li><a href="hotel_three_rivers.html">Hotel Three Rivers</a>
      <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>
    </li>
    </ul>

## 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
- H80: Identifying the purpose of a link using link text combined with the preceding heading element

## Tests

### Procedure

For each link in the content that uses this technique:

1. Find the `ul` or ol element that contains the link

2. Check that this list element (`ul`, `ol`) is a descendant of an `li` element

3. Check that the text of the link combined with the text of that li element describes the purpose of the link.

### Expected Results

- The above checks are true.

- Top
- Contents
- Intro
- Previous: Technique H80
- Next: Technique H83