Roll Landmärke

`navigation`

Ett landmärke som grupperar en uppsättning navigeringslänkar — primär nav, brödsmulor, innehållsförteckning. Elementet <nav> bär rollen automatiskt. Flera nav-element per sida är vanligt och tillåtet, men var och en måste ha ett unikt tillgängligt namn.

När ska det användas

Använd <nav>. Elementet omsluter en uppsättning navigeringslänkar — primär webbplatsnavigering, innehållsförteckning på sidan, brödsmulor, foterlänkar, paginering. Varje <nav> exponeras som ett navigeringslandmärke.

Till skillnad från banner och main är flera navigeringslandmärken per sida normalt och förväntat. Rubriken har en “Primär”-nav; artikeln har en “På den här sidan”-nav; fotern har en “Webbplatskarta”-nav.

role="navigation" på en <div> är lämpligt enbart när <nav> inte kan användas (t.ex. i ett äldre CMS).

Inte allt som “navigerar” är en nav. En lista med tre länkar mitt i ett stycke är bara text — att omsluta den med <nav> skapar brus. Reservera <nav> för viktiga länksamlingar som användare faktiskt navigerar med.

När ska det etiketteras

När du har mer än ett navigeringslandmärke på sidan (vilket nästan alltid är fallet) MÅSTE varje landmärke ha ett unikt tillgängligt namn via aria-label eller aria-labelledby. Annars visar skärmläsarens landmärkesmeny tre poster med “navigering” och användaren kan inte skilja dem åt.

Vanliga etiketter: “Primär”, “Sekundär”, “Footer”, “Brödsmulor”, “Paginering”, “På den här sidan”, “Hoppa-till-innehåll-länkar”.

Vanliga fel

Flera <nav>-element utan etiketter. Går inte att skilja åt i landmärkesmenyn.
Att omsluta en enstaka länk med <nav> — övertillämpat; använd bara <a>.
aria-label="Navigation" — redundant. Rollen är redan “navigation”; skärmläsare meddelar “Navigation, navigering”. Använd en meningsfull etikett som “Primär” eller “Brödsmulor”.
Primär nav renderad som role="menu" eller role="menubar". Webbplatsnavigering är ingen programmeny — se sidan om menu.
Brödsmulenavigering som saknar aria-label="Breadcrumb". Konventionen kräver etiketten för att rollen ska kännas igen.

Exempel

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