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.

HTML Techniques
ARIA Techniques

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>

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>