Navigations should be build using the <nav> element. The purpose is to provide navigation links, either within the current document or to other documents.

The nav element is intended only for a major block of navigation links; typically the main navgiation, table of content or footer navigation.

Instead of using a nav element, it is also possible to mark a div element as a navigation landmark using role="navigation". But using a nav element is the preferred way.

Labeling nav landmarks

If there is more than one navigation landmark role or <nav> element in a document, provide a label for each landmark. This label will allow an assistive technology user to be able to quickly understand the purpose of each landmark.

<div id="main-nav" role="navigation" aria-label="Main">
  <!-- content -->
</div>

…

<nav id="footer-nav" aria-label="Footer">
  <!-- content -->
</nav>

Repeated landmarks

If a navigation landmark role or <nav> element in a document is repeated in a document, and both landmarks have identical content, use the same label for each landmark. An example of this would be repeating the main navigation at the top and bottom of the page.

<header>
  <nav id="main-nav" aria-label="Main">
    <!-- list of links to main website locations -->
  </nav>
</header>

…

<footer>
  <nav id="footer-nav" aria-label="Main">
    <!-- list of links to main website locations -->
  </nav>
</footer>

Redundant descriptions

Screen readers will announce the type of role the landmark is. Because of this, you do not need to describe what the landmark is in its label. For example, a declaration of role="navigation" with an of aria-label="Primary navigation" may be announced redundantly as, "primary navigation navigation".