Technique H97:Grouping related links using the `nav` element

Applicability

HTML documents that contain related links.

This technique relates to:

1.3.1: Info and Relationships (Sufficient when used with Making information and relationships conveyed through presentation programmatically determinable using the following techniques: )
2.4.1: Bypass Blocks (Advisory)

Description

The objective of this technique is to group navigation links using the HTML nav element. The nav element is one of several sectioning elements in HTML. Use of this markup can make groups of links easier to locate and skip past by users of assistive technology such as screen readers. Using semantic structures allow custom style sheets to be used to change the presentation of groups of links while preserving their relationship. When the nav element is employed more than once on a page, distinguish the navigation groups by using an aria-labelledby or aria-label attribute.

Not all groups of links need to use the nav element for markup. For instance, links may be grouped in other structure such as lists or may use ARIA markup if they do not represent a discrete section of the page.

Examples

Example 1: Navigation links enclosed in a nav element

This example uses a nav element to group navigation links in an accessibility curriculum.

<nav>
  <ul>
    <li><a href="/web-accessibility.html">Web Accessibility</a></li>
    <li><a href="/doc-accessibility.html">Document Accessibility</a></li>
    <li><a href="/mobile-accessibility.html">Mobile Accessibility</a></li>
  </ul>    
</nav>

Example 2: Multiple `nav` elements and `aria-labelledby`

The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a nav element is used multiple times on a page, each instance may have a unique label specified using aria-labelledby:

<nav aria-labelledby="site-nav-heading">
  <h2 id="site-nav-heading">Site</h2>
    <ul>
      <li><a href="...">nav link 1</a></li>  
      <li><a href="...">nav link 2</a></li>
      <li><a href="...">nav link 3</a></li>
    </ul>
</nav>
<nav aria-labelledby="related-nav-heading">
  <h2 id="related-nav-heading">Related Topics</h2>
    <ul>
    <li><a href="...">topic link 1</a></li>
    <li><a href="...">topic link 2</a></li>
    <li><a href="...">topic link 3</a></li>
  </ul>
</nav>

Example 3: Multiple `nav` elements and `aria-label`

The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label:

<nav aria-label="Site">
  <ul>
    <li>< href="...">nav link 1</a></li>
    <li>< href="...">nav link 2</a></li>
    <li>< href="...">nav link 3</a></li>
  </ul>
</nav>
<nav aria-label="Tags">
  <ul>
    <li><a href="...">tag link 1</a></li>
    <li><a href="...">tag link 2</a></li>
    <li><a href="...">tag link 3</a></li>
  </ul>
</nav>

Other sources

No endorsement implied.

HTML - nav element.

Tests

Procedure

Check that links that are visually grouped and represent a section of the page are enclosed in a nav element.

Expected Results

Check #1 is true.