Techniques for WCAG 2.0

On this page:

-

# H77: Identifying the purpose of a link using link text combined with its enclosing list item

## Applicability

All technologies that contain links.

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

## Description

The objective of this technique is to identify the purpose of a link from the link and its list item context. The list item enclosing the link provides context for an otherwise unclear link when the link item is the nearest enclosing block-level ancestor element. 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 that simply providing the URI of the destination is generally not sufficiently descriptive.

Note: These descriptions will be most useful to the user if the additional information needed to understand the link precedes the link. If the additional information follows the link, there can be confusion and difficulty for screen reader users who are reading through the page in order (top to bottom).

## Examples

### Example 1

Example Code:

    <ul>
      <li>
        Check out the video report for last year's
        <a href="festival.htm">National Folk Festival</a>.
      </li>
      <li>
        <a href="listen.htm">Listen to the instruments</a>
      </li>
      <li>
        Guitar Man: George Golden talks about
        <a href="mkguitars.htm">making guitars</a>.
      </li>
    </ul>

### Example 2: A list of video games for download

Example Code:

    <ul>
      <li>
        <a href="tomb_raider.htm">Tomb Raider: Legend</a>
        <a href="tomb_raider_images.htm">See Images</a>
        <a href="tomb_raider.mpeg">(Download Demo)</a>
      </li>
      <li>
        <a href="fear_extraction.htm">F.E.A.R. Extraction Point</a>
        <a href="fear_extraction_images.htm">See Images</a>
        <a href="fear_extraction.mpeg">(Download Demo)</a>
      </li>
      <li>
        <a href="call_of_duty.htm">Call of Duty 2</a>
        <a href="call_of_duty_images.htm">See Images</a>
        <a href="call_of_duty.mpeg">(Download Demo)</a>
      </li>
      <li>
        <a href="Warhammer 40K.htm">Warhammer 40K</a>
        <a href="warhammer_40k_images.htm">See Images</a>
        <a href="Warhammer_40k.mpeg">(Download Demo)</a>
      </li>
    </ul>

## Resources

No resources available for this technique.

## Related Techniques

- G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence
- G91: Providing link text that describes the purpose of a link
- H33: Supplementing link text with the title attribute
- 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
- 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
- C7: Using CSS to hide a portion of the link text

## Tests

### Procedure

For each link in the content that uses this technique:

1. Check that the link is part of a list item.

2. Check that text of the link combined with the text of its enclosing list item describes the purpose of the link.

### Expected Results

- The above checks are true.

- Top
- Contents
- Intro
- Previous: Technique H76
- Next: Technique H78