Navigation Landmark

Navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation.

ARIA 1.1 Specification: navigation landmark

Design Patterns

If a page includes more than one navigation landmark, each should have a unique label.
If a navigation landmark has an identical set of links as another navigation landmark on the page, use the same label for each navigation landmark.

ARIA Techniques
HTML Techniques

A role="navigation" attribute is used to define a navigation landmark.

ARIA Example: One Navigation Landmark

When only one navigation landmark on a page, a label is optional.

<div role="navigation">

  <h2>title for navigation area<h2>

  <ul>
    <li><a href="page1.html">Link 1</a></li>
    <li><a href="page2.html">Link 2</a></li>
    <li><a href="page3.html">Link 3</a></li>
    <li><a href="page4.html">Link 4</a></li>
    .....
  </ul>
</div>

ARIA Example: More Than One Navigation Landmark

When there is more than one navigation landmark on a page, each should have a unique label.

<div role="navigation" aria-labelledby="nav1">

  <h2 id="nav1">title for navigation area 1<h2>

  <ul>
    <li><a href="page11.html">Link 1</a></li>
    <li><a href="page12.html">Link 2</a></li>
    <li><a href="page13.html">Link 3</a></li>
    <li><a href="page14.html">Link 4</a></li>
    .....
  </ul>
</div>

....

<div role="navigation" aria-labelledby="nav2">

  <h2 id="nav2">title for navigation area 2<h2>

  <ul>
    <li><a href="page21.html">Link 5</a></li>
    <li><a href="page22.html">Link 6</a></li>
    <li><a href="page23.html">Link 7</a></li>
    <li><a href="page24.html">Link 8</a></li>
    .....
  </ul>
</div>

Use the HTML nav element to define a navigation landmark.

HTML Example: One Navigation Landmark

When only one navigation landmark on a page, a label is optional.

<nav>

  <h2>title for navigation area<h2>

  <ul>
    <li><a href="page1.html">Link 1</a></li>
    <li><a href="page2.html">Link 2</a></li>
    <li><a href="page3.html">Link 3</a></li>
    <li><a href="page4.html">Link 4</a></li>
    .....
  </ul>
</nav>

HTML Example: More Than One Navigation Landmark Example

When there is more than one navigation landmark on a page, each should have a unique label.

<nav aria-labelledby="nav1">

  <h2 id="nav1">title for navigation 1<h2>

  <ul>
    <li><a href="page11.html">Link 1</a></li>
    <li><a href="page12.html">Link 2</a></li>
    <li><a href="page13.html">Link 3</a></li>
    <li><a href="page14.html">Link 4</a></li>
    .....
  </ul>
</nav>

....

<nav aria-labelledby="nav2">

  <h2 id="nav2">title for navigation 2<h2>

  <ul>
    <li><a href="page21.html">Link 5</a></li>
    <li><a href="page22.html">Link 6</a></li>
    <li><a href="page23.html">Link 7</a></li>
    <li><a href="page24.html">Link 8</a></li>
    .....
  </ul>
</nav>