Bilder mangler alternativ tekst

Hva betyr dette?

Kravet om alternativ tekst på bilder kommer fra WCAG 1.1.1 Ikke-tekstlig innhold, og er et av de mest grunnleggende kravene innen universell utforming. Regelen sier at alt innhold som ikke er tekst - bilder, ikoner, grafer, illustrasjoner - må ha et tekstalternativ som gir samme informasjon.

I praksis betyr dette at alle <img>-elementer på nettsiden din skal ha et alt-attributt. Innholdet i dette attributtet avhenger av hvilken rolle bildet spiller på siden. Et produktbilde trenger en helt annen alt-tekst enn et dekorativt bakgrunnsmønster.

Mange nettsider har bilder helt uten alt-attributt, eller med generiske beskrivelser som «bilde» eller «foto». Dette er ikke godt nok, verken for brukerne eller for loven.

Hvorfor er det viktig?

Tenk deg at du er synshemmet og bruker en skjermleser for å navigere på nettet. Når du kommer til et bilde uten alt-tekst, vil skjermleseren enten hoppe over bildet helt, eller - enda verre - lese opp filnavnet. Da hører du kanskje noe som «IMG underscore 20250115 underscore 094532 punkt jpg». Det gir ingen mening og skaper forvirring.

Men det er ikke bare blinde og svaksynte som har nytte av god alt-tekst. Bilder kan også feile å laste - for eksempel på treg mobilforbindelse. Da vises alt-teksten i stedet, slik at brukeren fortsatt forstår hva som skulle vært der. I tillegg bruker søkemotorer som Google alt-tekst for å forstå bildene dine, noe som kan gi bedre synlighet i bildesøk.

I Norge er universell utforming av nettsider et lovkrav gjennom likestillings- og diskrimineringsloven. WCAG 1.1.1 er klassifisert som nivå A - det aller laveste og mest grunnleggende nivået. Det betyr at dette kravet alltid må oppfylles, uten unntak.

Hvordan fikser jeg det?

Løsningen avhenger av hvilken type bilde det er snakk om. Her er de vanligste scenariene:

Informative bilder

Hvis bildet formidler informasjon som er viktig for å forstå innholdet, skal du beskrive hva bildet viser - kort og presist. Tenk på hva en person som ikke kan se bildet trenger å vite.

<img src="teamet-vårt.jpg" alt="Tre smilende medarbeidere foran kontoret vårt i Oslo">

En god tommelfingerregel er å holde alt-teksten under 125 tegn. Vær konkret: «Rød sykkel parkert utenfor kafé» er bedre enn «Bilde av sykkel».

Dekorative bilder

Noen bilder er rent dekorative - de tilfører ikke informasjon, men brukes som visuell pynt. Bakgrunnsmønstre, skillelinjer og stemningsbilder som gjentar informasjon fra teksten er typiske eksempler. Disse skal ha et tomt alt-attributt:

<img src="dekorativ-linje.png" alt="">

Merk at du ikke skal fjerne alt-attributtet helt. Et tomt alt="" forteller skjermleseren eksplisitt at bildet er dekorativt og kan hoppes over. Hvis attributtet mangler helt, vil skjermleseren ofte prøve å lese opp filnavnet.

Lenkede bilder

Når et bilde fungerer som en lenke, skal alt-teksten beskrive lenkens mål - ikke selve bildet. Brukeren trenger å vite hvor de havner hvis de klikker, ikke hvordan ikonet ser ut.

<a href="/produkter">
  <img src="handlekurv-ikon.svg" alt="Gå til produktsiden">
</a>

Komplekse bilder (grafer, diagrammer, infografikk)

Noen bilder inneholder mye informasjon - for eksempel et søylediagram som viser salgsutvikling. Da er det ikke nok med en kort alt-tekst. Du bør gi en oppsummering i alt-attributtet og en full beskrivelse i teksten rundt bildet.

<figure>
  <img src="salgsdiagram-2025.png" 
       alt="Søylediagram som viser at salget økte med 40 prosent fra Q1 til Q4 i 2025">
  <figcaption>
    Figur 1: Kvartalsvis salgsutvikling i 2025. Q1: 1,2 mill kr, 
    Q2: 1,4 mill kr, Q3: 1,5 mill kr, Q4: 1,7 mill kr.
  </figcaption>
</figure>

Sjekkliste for god alt-tekst

Her er noen tips å ha i bakhodet når du skriver alt-tekst:

• Vær konkret: Beskriv det viktigste i bildet. Unngå vage formuleringer.
• Ikke start med «Bilde av»: Skjermlesere annonserer allerede at det er et bilde.
• Tenk kontekst: Samme bilde kan trenge ulik alt-tekst avhengig av sammenhengen.
• Hold det kort: Maks ett til to setninger for vanlige bilder.
• Test selv: Prøv å lukke øynene og bare lytte til alt-teksten. Gir den mening?

God alt-tekst handler om empati - det handler om å gi alle brukere tilgang til det samme innholdet, uavhengig av hvordan de opplever nettsiden din.