Rol Oriëntatiepunt

`navigation`

Een landmark dat een set navigatielinks groepeert — primaire navigatie, broodkruimelpad, inhoudsopgave. Het <nav>-element draagt deze rol automatisch. Meerdere nav-elementen per pagina zijn normaal, maar elk moet een onderscheidende toegankelijke naam hebben.

Wanneer te gebruiken

Gebruik <nav>. Het element omhult een set navigatielinks — primaire sitenavigatie, in-pagina inhoudsopgave, broodkruimels, voettekstlinks, paginering. Elk <nav>-element wordt als navigatie-landmark weergegeven.

In tegenstelling tot banner en main zijn meerdere navigatie-landmarks per pagina normaal en verwacht. De header heeft een navigatie “Primair”; het artikel heeft een navigatie “Op deze pagina”; de voettekst heeft een navigatie “Sitemap”.

role="navigation" op een <div> is alleen gepast wanneer <nav> niet gebruikt kan worden (verouderd CMS).

Niet alles wat “navigeert” is een nav. Een lijst van drie links midden in een alinea is gewoon tekst — die in <nav> plaatsen zou ruis veroorzaken. Reserveer <nav> voor grote verzamelingen links waar gebruikers daadwerkelijk naartoe navigeren.

Wanneer een label te gebruiken

Wanneer er meer dan één navigatie-landmark op de pagina staat (wat bijna altijd het geval is), MOET elk een onderscheidende toegankelijke naam hebben via aria-label of aria-labelledby. Anders toont het landmark-menu van de schermlezer drie “navigatie”-vermeldingen en kan de gebruiker ze niet van elkaar onderscheiden.

Gangbare labels: “Primair”, “Secundair”, “Voettekst”, “Broodkruimel”, “Paginering”, “Op deze pagina”, “Snel naar inhoud”.

Veelvoorkomende fouten

Meerdere <nav>-elementen zonder labels. Niet te onderscheiden in het landmark-menu.
Eén enkele link in <nav> wikkelen — overmatig toegepast; gebruik gewoon <a>.
aria-label="Navigation" — redundant. De rol is al “navigation”; schermlezers kondigen “Navigation, navigation” aan. Gebruik een betekenisvol label zoals “Primair” of “Broodkruimel”.
Primaire navigatie weergegeven als role="menu" of role="menubar". Sitenavigatie is geen applicatiemenu — zie de menu-pagina.
Broodkruimelnavigatie zonder aria-label="Breadcrumb". Conventie vereist het label zodat de rol herkend wordt.

Voorbeeld

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