Lenker må ha forståelig tekst

Hva betyr dette?

WCAG 2.4.4 Formål med lenke (i kontekst) krever at formålet med hver lenke kan forstås ut fra lenketeksten alene, eller ut fra lenketeksten sammen med den umiddelbare konteksten. I praksis betyr dette at alle lenker på nettsiden din bør ha en tekst som forteller brukeren hvor lenken fører, uten at de trenger å lese hele avsnittet rundt.

Kravet er nivå A - helt grunnleggende - og det er et av de vanligste bruddene vi finner på norske nettsider. «Les mer», «Klikk her», «Her», «Mer info» og «Last ned» er alle eksempler på lenketekster som isolert sett ikke gir noen mening.

Hvorfor er det viktig?

For å forstå hvorfor dette kravet er viktig, må du vite litt om hvordan skjermleserbrukere navigerer. En vanlig teknikk er å bruke en hurtigtast for å hente opp en liste over alle lenker på siden. Denne listen viser bare lenketekstene, helt løsrevet fra resten av innholdet.

Se for deg at listen ser slik ut:

• Les mer
• Les mer
• Les mer
• Klikk her
• Les mer
• Her

Det er umulig å vite hvor noen av lenkene fører. Brukeren må gå tilbake til siden, navigere til hver enkelt lenke, og lese teksten rundt for å forstå formålet. Det er tidkrevende og frustrerende.

Men problemet gjelder ikke bare skjermleserbrukere. Seende brukere skanner også sider raskt og fester seg ved lenker. En lenke som sier «Se våre priser» er langt mer informativ og klikkbar enn «Klikk her» - også for brukere uten funksjonsnedsettelse.

For SEO er dette også relevant. Søkemotorer bruker lenketekst for å forstå hva den lenkede siden handler om. Beskrivende lenketekster kan gi bedre rangering for de sidene du lenker til.

Hvordan fikser jeg det?

Skriv selvforklarende lenketekster

Den beste løsningen er å gjøre lenketeksten beskrivende i seg selv. Brukeren skal kunne forstå hva som skjer når de klikker, bare ved å lese lenken.

Dårlige lenketekster:

<p>Vi tilbyr rådgivning innen universell utforming. <a href="/tjenester">Les mer</a></p>

<p>For priser, <a href="/#priser">klikk her</a>.</p>

<p>Last ned <a href="/rapport.pdf">her</a>.</p>

Gode lenketekster:

<p>Vi tilbyr rådgivning innen universell utforming. 
   <a href="/tjenester">Les mer om våre rådgivningstjenester</a></p>

<p><a href="/#priser">Se priser for våre tjenester</a></p>

<p><a href="/rapport.pdf">Last ned årsrapporten for 2025 (PDF, 2 MB)</a></p>

Legg merke til den siste lenken - den forteller også filformat og størrelse. Det er god praksis for lenker til dokumenter, slik at brukeren vet hva de laster ned.

Når du ikke kan endre den synlige teksten

Noen ganger krever designet at lenketeksten er kort, for eksempel i en kortlayout der hver artikkel har en «Les mer»-lenke. I slike tilfeller kan du bruke aria-label for å gi skjermlesere en utvidet beskrivelse:

<article>
  <h3>Universell utforming for nettbutikker</h3>
  <p>Slik gjør du nettbutikken tilgjengelig for alle kunder...</p>
  <a href="/artikkel/uu-nettbutikk" 
     aria-label="Les mer om universell utforming for nettbutikker">
    Les mer
  </a>
</article>

Nå ser seende brukere fortsatt «Les mer», men skjermleseren leser opp den fullstendige beskrivelsen fra aria-label. Alle er fornøyde.

Bruk aria-describedby for ekstra kontekst

En annen teknikk er å peke lenken til en eksisterende overskrift med aria-describedby:

<article>
  <h3 id="artikkel-1">Tips for bedre nettsider</h3>
  <p>Fem enkle grep som forbedrer brukeropplevelsen...</p>
  <a href="/artikkel/tips" aria-describedby="artikkel-1">Les mer</a>
</article>

Her annonserer skjermleseren «Les mer - Tips for bedre nettsider», som gir god kontekst.

Unngå URL-er som lenketekst

Noen nettsider bruker hele URL-en som lenketekst. Det er en dårlig opplevelse for alle brukere, men spesielt for skjermleserbrukere som må lytte til hele adressen bokstav for bokstav:

<!-- Dårlig -->
<a href="https://www.uukontroll.no/tjenester/rådgivning">
  https://www.uukontroll.no/tjenester/rådgivning
</a>

<!-- Bra -->
<a href="https://www.uukontroll.no/tjenester/rådgivning">
  Rådgivning innen universell utforming
</a>

Lenker som åpner i nytt vindu

Hvis en lenke åpner i et nytt vindu eller en ny fane, bør du informere brukeren om dette. Det forhindrer forvirring - spesielt for skjermleserbrukere som plutselig mister tilbake-knappen.

<a href="https://www.wcag.no" target="_blank" rel="noopener">
  WCAG-standarden (åpnes i ny fane)
</a>

Sjekkliste for gode lenker

• Lenketeksten gir mening isolert, uten omgivende tekst
• Du har ikke flere lenker med samme tekst som peker til ulike steder
• Lenker til filer opplyser om filformat og størrelse
• Lenker som åpner i nytt vindu informerer om dette
• Du bruker ekte <a>-elementer med href, ikke <span> eller <div> med klikkfunksjon

Gode lenketekster gjør nettsiden enklere å bruke for absolutt alle - og det tar bare litt ekstra omtanke når du skriver innholdet.