navigation

Hvornår bruges det

Brug <nav>. Elementet omslutter et sæt navigationslinks — primær sitenav, in-page indholdsfortegnelse, brødkrummer, fodlinks, paginering. Hvert <nav> eksponeres som et navigationslandmark.

I modsætning til banner og main er flere navigationslandmarks per side normalt og forventet. Headeren har en “Primary”-nav; artiklen har en “On this page”-nav; footeren har en “Site map”-nav.

role="navigation" på en <div> er kun passende, når man ikke kan bruge <nav> (legacy CMS).

Ikke alt, der “navigerer”, er en nav. En liste med tre links midt i et afsnit er blot tekst — at omslutter det i <nav> ville skabe støj. Reservér <nav> til større samlinger af links, som brugere reelt navigerer i.

Hvornår skal der mærkes

Når du har mere end ét navigationslandmark på siden (hvilket næsten altid er tilfældet), SKAL hvert have et unikt tilgængeligt navn via aria-label eller aria-labelledby. Ellers viser skærmlæserens landmarkmenu tre “navigation”-poster, og brugeren kan ikke skelne dem fra hinanden.

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

Hyppige fejl

• Flere <nav>-elementer uden labels. Umulige at skelne i landmarkmenuen.
• Omslutning af et enkelt link i <nav> — overappliceret; brug blot <a>.
• aria-label="Navigation" — redundant. Rollen er allerede “navigation”; skærmlæsere annoncerer “Navigation, navigation”. Brug et meningsfuldt label som “Primary” eller “Breadcrumb”.
• Primær nav renderet som role="menu" eller role="menubar". Sitenav er ikke en applikationsmenu — se menu-siden.
• Brødkrumme-nav, der mangler aria-label="Breadcrumb". Konventionen kræver labelen, så rollen genkendes.

Eksempel

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