Hold navigasjonen lik på tvers av sider (WCAG 3.2.3)

Tenk deg at du besøker en nettside der hovedmenyen ligger øverst på forsiden, men plutselig dukker opp i et sidefelt på undersidene. Eller at rekkefølgen på menyknappene skifter fra side til side: «Hjem, Om oss, Tjenester, Kontakt» på én side, og «Tjenester, Hjem, Kontakt, Om oss» på neste. Det ville vært forvirrende for alle - men for brukere som er avhengige av konsistens for å orientere seg, kan det gjøre nettsiden ubrukelig.

Hva sier kravet?

WCAG 3.2.3 Konsekvent navigering krever at navigasjonsmekanismer som gjentas på flere sider innenfor et nettsted, presenteres i samme relative rekkefølge hver gang - med mindre brukeren selv velger å endre det. Kravet er på nivå AA.

«Samme relative rekkefølge» betyr at elementene skal komme i samme sekvens i forhold til hverandre, selv om det legges til nye elementer. Hvis hovedmenyen har elementene «Hjem, Produkter, Om oss» på forsiden, skal de ha den rekkefølgen på alle sider. Det er greit å legge til et nytt element - for eksempel «Hjem, Produkter, Blogg, Om oss» - men de opprinnelige elementene skal fremdeles stå i samme innbyrdes rekkefølge.

Kravet gjelder all gjentatt navigasjon: hovedmeny, bunnmeny, brødsmulesti, søkefelt, sidenavigeringselementer og lignende. Det gjelder den visuelle rekkefølgen så vel som den programmatiske rekkefølgen i koden.

Hvorfor er dette viktig?

Brukere bygger en mental modell

Når du bruker en nettside, bygger hjernen din ubevisst en mental modell av hvordan siden er organisert. Du lærer raskt at menyen er øverst, søkefeltet er til høyre, og logoen fører til forsiden. Denne mentale modellen gjør at du navigerer effektivt uten å tenke over det.

Hvis navigasjonen endrer seg fra side til side, bryter den mentale modellen sammen. Brukeren må starte på nytt og finne ut av layouten hver gang de åpner en ny side. Det koster tid og energi for alle - men ramme spesielt hardt for brukere med kognitive funksjonsnedsettelser.

Skjermleserbrukere navigerer etter hukommelse

En skjermleserbruker kan ikke skanne en side visuelt. De navigerer sekvensielt gjennom innholdet, og etter å ha brukt nettstedet noen ganger, vet de omtrent at «etter tre tabulatorstopp er jeg på søkefeltet, etter fem er jeg på hovedmenyen». Hvis navigasjonsstrukturen endrer seg, fungerer ikke denne kunnskapen lenger, og brukeren må orientere seg på nytt.

Motorisk funksjonsnedsettelse

Brukere som navigerer med bryter, øyestyring eller andre alternative input-enheter, har ofte programmert inn snarveier eller bevegelsesmønstre basert på at navigasjonen er forutsigbar. Endringer i layout eller rekkefølge kan gjøre disse snarveiene ubrukelige.

Eldre brukere

Mange eldre bruker internett daglig, men er mindre tilpasningsdyktige når layouten endrer seg. De har lært seg nøyaktig hvor knappene er, og en endring kan gjøre dem usikre og frustrerte.

Slik oppfyller du kravet

Bruk felles maler for navigasjon

Den enkleste måten å sikre konsekvent navigering på er å bruke felles maler (templates) eller komponenter for navigasjonsstrukturen. I de fleste moderne nettrammeverk er dette standard praksis:

<!-- Felles header-komponent brukt på alle sider -->
<header>
  <nav aria-label="Hovedmeny">
    <ul>
      <li><a href="/">Hjem</a></li>
      <li><a href="/tjenester">Tjenester</a></li>
      <li><a href="/#priser">Priser</a></li>
      <li><a href="/om-oss">Om oss</a></li>
      <li><a href="mailto:kontakt@uukontroll.no">Kontakt</a></li>
    </ul>
  </nav>
</header>

Denne strukturen bør hentes fra ett sted - én mal, én komponent, én include-fil - slik at endringer automatisk reflekteres på alle sider.

Hold søkefeltet på samme plass

Søkefeltet er en av de navigasjonsmekanismene brukere forventer å finne på et fast sted. Plasser det konsekvent, typisk i headeren:

<header>
  <a href="/" class="logo">Firmanavn</a>
  <nav aria-label="Hovedmeny">
    <!-- Menylenker -->
  </nav>
  <form role="search" action="/sok" method="get">
    <label for="sok" class="sr-only">Søk</label>
    <input type="search" id="sok" name="q" 
      placeholder="Søk på siden...">
    <button type="submit">Søk</button>
  </form>
</header>

Brødsmulestien skal følge samme mønster

Hvis du har brødsmuler, bør de alltid plasseres på samme sted og bruke samme format:

<nav aria-label="Brødsmuler">
  <ol>
    <li><a href="/">Hjem</a></li>
    <li><a href="/tjenester">Tjenester</a></li>
    <li aria-current="page">Webutvikling</li>
  </ol>
</nav>

Bunntekst med konsekvent innhold

Bunnmenyen er ofte et oversett område, men den bør også være konsekvent:

<footer>
  <nav aria-label="Bunnmeny">
    <ul>
      <li><a href="/personvern">Personvernerklæring</a></li>
      <li><a href="/vilkar">Vilkår</a></li>
      <li><a href="/tilgjengelighet">
        Tilgjengelighetserklæring</a></li>
      <li><a href="mailto:kontakt@uukontroll.no">Kontakt oss</a></li>
    </ul>
  </nav>
</footer>

Responsivt design krever ekstra oppmerksomhet

Når navigasjonen tilpasser seg ulike skjermstørrelser (hamburger-meny på mobil, full meny på desktop), er det viktig at rekkefølgen innenfor navigasjonen forblir den samme. Det er greit at menyen visuelt flyttes fra toppen til en sidemeny, så lenge elementene inni den kommer i samme rekkefølge.

Vanlige feil

Ulik menyrekkefølge mellom sider - dette skjer oftest når undersider er laget av ulike team eller på ulike tidspunkt, og menyen er hardkodet i stedet for å komme fra en felles kilde.
Navigasjon som forsvinner på enkelte sider - for eksempel at hovedmenyen er borte på landingssider eller kampanjesider, mens den finnes på resten av nettstedet.
Søkefeltet flytter på seg - noen ganger er det i headeren, andre ganger i sidefeltet, og på noen sider mangler det helt.
Ulik bunnmeny - bunnmenyen på forsiden har andre lenker enn bunnmenyen på undersidene.
Mobilmeny med annen rekkefølge enn desktopmeny - hamburger-menyen bør ha nøyaktig samme rekkefølge på lenkene som den utvidede desktop-menyen.

Konsekvent navigering er ikke bare et tilgjengelighetskrav - det er grunnleggende god brukeropplevelse. Brukere skal kunne stole på at de finner det de leter etter på samme sted, uansett hvilken side de er på.