NAVIGATION Landmark

Definition 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 Specification navigation landmark
Coding 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.
Techniques
  • Use the HTML5 nav element to define a navigation landmark.
  • If the HTML5 nav element technique is not being used, use a role="navigation" attribute to define a navigation landmark.
Headings
  • Each navigation landmark should have an h2 element, which maybe rendered off screen.
  • If there are more than one navigation landmarks on the page, use aria-labelledby to reference the h2 elements for labeling each landmark.

One navigation landmark

HTML5 nav element technique

<nav>

  <h2>title for navigation<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>

[role="navigation"] attribute technique

<div role="navigation">

  <h2>title for navigation<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>

More than one navigation landmark

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