NAVIGATION Landmark Design Patterns

One navigation landmark

<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

<div role="navigation" 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>
</div>
<div role="navigation" aria-labelledby="nav2">

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

  <ul>
    <li><a href="page21.html">Page 10</a></li>
    <li><a href="page22.html">Page 11</a></li>
    <li><a href="page23.html">Page 12</a></li>
    <li><a href="page24.html">Page 13</a></li>
    .....
  </ul>
</div>