navigation

When to use

Use <nav>. The element wraps a set of navigation links — primary site nav, in-page table of contents, breadcrumbs, footer links, pagination. Each <nav> is exposed as a navigation landmark.

Unlike banner and main, multiple navigation landmarks per page are normal and expected. The header has a “Primary” nav; the article has an “On this page” nav; the footer has a “Site map” nav.

role="navigation" on a <div> is appropriate only when you cannot use <nav> (legacy CMS).

Not everything that “navigates” is a nav. A list of three links in the middle of a paragraph is just text — wrapping it in <nav> would create noise. Reserve <nav> for major collections of links that users genuinely navigate.

When to label

When you have more than one navigation landmark on the page (you almost always will), each MUST have a distinct accessible name via aria-label or aria-labelledby. Otherwise the screen-reader landmark menu shows three “navigation” entries and the user cannot tell them apart.

Conventional labels: “Primary”, “Secondary”, “Footer”, “Breadcrumb”, “Pagination”, “On this page”, “Skip links”.

Common failures

• Multiple <nav> elements with no labels. Indistinguishable in the landmark menu.
• Wrapping a single link in <nav> — over-applied; just use <a>.
• aria-label="Navigation" — redundant. The role is already “navigation”; screen readers announce “Navigation, navigation”. Use a meaningful label like “Primary” or “Breadcrumb”.
• Primary nav rendered as role="menu" or role="menubar". Site nav is not an application menu — see the menu page.
• Breadcrumb nav missing aria-label="Breadcrumb". Convention requires the label so the role is recognised.

Example

<header>
  <nav aria-label="Primary">
    <a href="/toolkit/">Toolkit</a>
    <a href="/library/">Library</a>
  </nav>
</header>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/toolkit/">Toolkit</a></li>
    <li aria-current="page">Standards</li>
  </ol>
</nav>