Snarveier til innhold

Forestill deg at du må trykke Tab 30 ganger gjennom den samme menyen, headeren og søkefeltet – på hver eneste side du besøker. For tastaturbrukere og skjermleserbrukere er dette hverdagen på nettsider som mangler en enkel, men viktig funksjon: en «hopp til innhold»-lenke (også kalt «skip link»).

Hva betyr dette?

WCAG 2.4.1 «Hoppe over blokker» (nivå A) krever at det finnes en mekanisme som lar brukere hoppe over innhold som gjentas på flere sider – typisk navigasjonsmenyer, toppseksjoner og verktøylinjer. Den vanligste og mest anerkjente løsningen er en skip link: en lenke som er det aller første elementet på siden, og som hopper direkte til hovedinnholdet.

Dette kravet er på nivå A, altså det mest grunnleggende nivået. Det er et absolutt minimumskrav i praktisk tilgjengelighetsarbeid og et av de første punktene som bør på plass i alle nye løsninger.

Hvorfor er det viktig?

Tastaturbrukere sparer masse tid

Mange brukere navigerer nettsider med bare tastaturet – enten fordi de har motoriske utfordringer, fordi de bruker alternative pekemetoder, eller fordi de foretrekker det. Uten en skip link må de trykke Tab gjennom samtlige lenker i navigasjonen på hver eneste side. Har du en meny med 20 lenker, betyr det 20 tastetrykk bare for å komme til innholdet.

Skjermleserbrukere får raskere tilgang

Selv om moderne skjermlesere har egne snarveier for å hoppe mellom landemerker, er en skip link en pålitelig og universell løsning som fungerer uavhengig av hvilken skjermleser eller nettleser brukeren har.

Positiv brukeropplevelse

En skip link er et tydelig signal til brukerne om at du bryr deg om tilgjengeligheten på nettsiden din. Det er en liten detalj som gjør hverdagen lettere for mange mennesker.

Hvordan fikser jeg det?

Grunnleggende implementering

En skip link er en vanlig HTML-lenke som peker på en anker-ID lenger ned på siden. Lenken plasseres som det aller første elementet inne i <body>:

<body>
  <a href="#hovedinnhold" class="skip-link">
    Hopp til hovedinnhold
  </a>

  <header>
    <nav>
      <ul>
        <li><a href="/">Hjem</a></li>
        <li><a href="/tjenester">Tjenester</a></li>
        <li><a href="/om">Om oss</a></li>
        <li><a href="mailto:kontakt@uukontroll.no">Kontakt</a></li>
      </ul>
    </nav>
  </header>

  <main id="hovedinnhold">
    <h1>Sidens tittel</h1>
    <p>Her er hovedinnholdet...</p>
  </main>
</body>

Merk at id="hovedinnhold" settes på <main>-elementet, og href="#hovedinnhold" i lenken peker dit.

Visuelt skjult, synlig ved fokus

De fleste skip links er visuelt skjult til de får tastaturfokus. Dette gjøres med CSS:

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #1a1a2e;
  color: #ffffff;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 4px 0;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #e94560;
  outline-offset: 2px;
}

Når brukeren trykker Tab som det første på siden, dukker lenken opp øverst i venstre hjørne. Når de trykker Enter, hopper fokus til hovedinnholdet. Når de trykker Tab videre, forsvinner lenken visuelt igjen.

Viktig: Ikke bruk display: none eller visibility: hidden for å skjule skip linken. Disse metodene fjerner elementet fra tab-rekkefølgen, slik at tastaturbrukere aldri kan nå det. Bruk i stedet posisjonering utenfor skjermen, som i eksempelet over.

Flere skip links

For nettsider med mye innhold kan det være nyttig å tilby flere snarveier:

<div class="skip-links">
  <a href="#hovedinnhold" class="skip-link">Hopp til hovedinnhold</a>
  <a href="#sok" class="skip-link">Hopp til søk</a>
  <a href="#kontakt" class="skip-link">Hopp til kontaktinformasjon</a>
</div>

Ikke overdriv – to til tre skip links er vanligvis nok. For mange kan bli forvirrende.

Sørg for at fokus faktisk flyttes

Noen nettlesere (spesielt eldre versjoner) har hatt problemer med at fokus ikke flyttes korrekt til målankeret. For å sikre at det fungerer, kan du legge til tabindex="-1" på målelementet:

<main id="hovedinnhold" tabindex="-1">
  <h1>Sidens tittel</h1>
</main>

tabindex="-1" gjør at elementet kan motta fokus programmatisk (via lenken), men det blir ikke en del av den vanlige tab-rekkefølgen. Du kan eventuelt fjerne fokusringen visuelt for å unngå at det ser rart ut:

main:focus {
  outline: none;
}

Alternativ: Bruk landemerker i tillegg

Skip links og HTML-landemerker utfyller hverandre. Skip links er synlige for alle tastaturbrukere, mens landemerker primært brukes av skjermlesere. Den beste tilnærmingen er å bruke begge deler:

<body>
  <a href="#hovedinnhold" class="skip-link">Hopp til hovedinnhold</a>

  <header>
    <nav aria-label="Hovedmeny">
      <!-- menyinnhold -->
    </nav>
  </header>

  <main id="hovedinnhold">
    <!-- hovedinnhold -->
  </main>

  <footer>
    <!-- bunntekst -->
  </footer>
</body>

Vanlige feil å unngå

Skip linken er ikke det første elementet. Hvis det er andre fokuserbare elementer før skip linken (som et cookie-banner), mister den mye av sin verdi.
Lenken peker på feil sted. Sjekk at href-verdien matcher id-attributtet på målelementet. En liten skrivefeil gjør at lenken ikke fungerer.
Skip linken er helt usynlig. Selv om den er visuelt skjult normalt, må den bli synlig når den får fokus. Ellers kan seende tastaturbrukere ikke se at den eksisterer.
Fokus flyttes ikke. Test at fokus faktisk hopper til hovedinnholdet når du klikker på lenken, ikke bare at siden scroller dit.

Slik tester du

Åpne nettsiden din i nettleseren.
Trykk Tab som det aller første.
En «Hopp til hovedinnhold»-lenke bør dukke opp.
Trykk Enter.
Fokus bør nå være på hovedinnholdet – det neste Tab-trykket bør ta deg til det første interaktive elementet i hovedinnholdet, ikke tilbake til menyen.

Implementering av en skip link er en av de enkleste og mest effektive tiltakene for tilgjengelighet du kan gjøre. Det tar bare noen minutter med HTML og CSS, og det gjør hverdagen merkbart bedre for tastaturbrukere.