Rooli Maamerkki

`navigation`

Maamerkkirooli, joka ryhmittelee navigointilinkkejä — päänavigaatio, murupolku, sisällysluettelo. <nav>-elementti saa tämän roolin automaattisesti. Useita nav-elementtejä per sivu on tavallista, mutta jokaisella on oltava yksilöllinen saavutettava nimi.

Milloin käyttää

Käytä <nav>-elementtiä. Se käärii joukon navigointilinkkejä — sivuston päänavigaation, sivun sisällysluettelon, murupolun, alatunnisteen linkit, sivutuksen. Jokainen <nav> on näkyvissä navigointimaamerkkinä.

Toisin kuin banner ja main, useita navigointimaamerkkejä per sivu on normaalia ja odotettua. Otsikossa on “Ensisijainen” navigaatio, artikkelissa on “Tällä sivulla” -navigaatio ja alatunnisteessa on “Sivukartta”-navigaatio.

role="navigation" <div>-elementillä on asianmukaista vain silloin, kun <nav>-elementin käyttö ei onnistu (esimerkiksi vanha sisällönhallintajärjestelmä).

Kaikki “navigoiva” sisältö ei ole nav. Kolme linkkiä kappaleen keskellä ovat vain tekstiä — niiden kääriminen <nav>-elementtiin tuottaisi melua. Varaa <nav> suurille linkkikokoelmille, joissa käyttäjät todella navigoivat.

Milloin nimetä

Kun sivulla on useampi kuin yksi navigointimaamerkki (mikä on lähes aina), jokaisella TÄYTYY olla yksilöllinen saavutettava nimi aria-label- tai aria-labelledby-attribuutin avulla. Muussa tapauksessa ruudunlukuohjelman maamerkkiluettelossa näkyy kolme “navigaatio”-merkintää eikä käyttäjä pysty erottamaan niitä toisistaan.

Tavanomaiset nimet: “Ensisijainen”, “Toissijainen”, “Alatunniste”, “Murupolku”, “Sivutus”, “Tällä sivulla”, “Ohituslinkit”.

Yleiset virheet

Useita <nav>-elementtejä ilman nimiä. Ne ovat erottamattomia maamerkkiluettelossa.
Yksittäisen linkin kääriminen <nav>-elementtiin — liikaa; käytä vain <a>.
aria-label="Navigation" — tarpeeton. Rooli on jo “navigation”; ruudunlukuohjelmat ilmoittavat “Navigaatio, navigaatio”. Käytä kuvaavaa nimeä, kuten “Ensisijainen” tai “Murupolku”.
Päänavigaatio renderöitynä role="menu"- tai role="menubar"-roolilla. Sivuston navigaatio ei ole sovellusvalikko — katso menu-sivu.
Murupolku-nav ilman aria-label="Breadcrumb". Käytäntö edellyttää nimen, jotta rooli tunnistetaan.

Esimerkki

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