Skip to content

Technique 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

About this Technique

This technique relates to 2.4.4: Link Purpose (In Context) (Sufficient when used for Identifying the purpose of a link using link text combined with programmatically determined link context).

This technique applies to HTML.

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

<ul>
  <li>Annual Report 2021
    <ul> 
      <li>
        <a href="ar-2021.html"><abbr title="HyperText Markup Language">HTML</abbr></a>
      </li>
      <li>
        <a href="ar-2021.pdf"><abbr title="Portable Document Format">PDF</abbr></a>
      </li>
      <li>
        <a href="ar-2021.rtf"><abbr title="Rich Text Format">RTF</abbr></a>
      </li>
    </ul>
  </li>
  <li>Annual Report 2022
    <ul> 
      <li>
        <a href="ar-2022.html">HTML</a>
      </li>
      <li>
        <a href="ar-2022.pdf">PDF</a>
      </li>
      <li>
        <a href="ar-2022.rtf">RTF</a>
      </li>
    </ul>
  </li>
</ul>

Example 2: Blocks of information about 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.

<nav>
  <ul>
    <li><a href="royal-palm-hotel.html">Royal Palm Hotel</a>
      <ul>
        <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="royal-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>
        <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>
</nav>

Related Resources

No endorsement implied.

Tests

Procedure

For each nested link in the content that uses this technique:

  1. Find the link's parent ul or ol element.
  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 parent li element describes the purpose of the link.

Expected Results

  • Checks #2 and #3 are true.
Back to Top