3 min. læsning

Skriv gode alternative tekster til billeder og ikoner

Vælg den rigtige alternativtekst ud fra billedets formål – med et ægte foto og fungerende eksempler på billeder, links og ikoner.

Kort fortalt

En god alternativtekst giver den information, som billedet bidrager med i den konkrete sammenhæng. Det samme billede kan derfor have forskellige tekster eller slet ingen.

Alternativteksten er ikke en billedanalyse. Den skal erstatte det, en person ellers ville få ud af billedet i netop den situation. Begynd derfor ikke med Hvad kan jeg se?, men med Hvorfor er billedet her?.

Sådan gør du

  1. Find billedets formål

    Læs overskriften, billedteksten, og teksten omkring billedet. Spørg, hvilken information der ville mangle, hvis billedet forsvandt. Det svar er kernen i alternativteksten.

  2. Vælg mellem fire billedtyper

    • Informativt billede: Beskriv den relevante information kort.
    • Dekorativt billede: Brug tom alternativtekst, alt="", så det kan springes over.
    • Funktionelt billede: Beskriv handlingen eller målet, ikke ikonets form.
    • Komplekst billede: Giv en kort alternativtekst og forklar data eller sammenhænge i den almindelige tekst.

  3. Skriv kort og konkret

    Skriv det vigtigste først. Undgå billede af, når det allerede er tydeligt, at elementet er et billede. Medtag synlig tekst, hvis den har betydning og ikke allerede står ved siden af.

  4. Giv ikoner et tilgængeligt navn

    Et ikon ved siden af synlig tekst er normalt dekorativt. Skjul det for hjælpemidler, og lad linkteksten være navnet. Hvis et ikon står alene, skal kontrollen have et navn, der beskriver handlingen, for eksempel Download rapporten.

Det samme foto, tre forskellige svar

En rød og gulstribet cykel med kurv står op ad en graffitidækket elboks i København.
Foto: Daderot, 2012. Udgivet som CC0 via Wikimedia Commons. Alternativteksten her passer til en artikel om cyklens særpræg.

Artikel om farverige bycykler

God tekst: En rød og gulstribet cykel med kurv står op ad en graffitidækket elboks i København.

Farverne og bymiljøet er en del af pointen.

Artikel om cykelparkering

God tekst: En cykel er parkeret op ad en elboks og spærrer ikke fortovets ganglinje.

Placeringen er vigtigere end cyklens farver.

Ikonlink og ikonknap i HTML

Ikon med synlig linktekst

Gå til tjeklisten

Pilen er skjult for hjælpemidler. Den synlige tekst er linkets navn og fortæller, hvor det fører hen.

Ikon uden synlig tekst

Læs guiden til tilgængelige PDF-filer

Linket har et navn, selv om det kun viser et dokumentikon. Brug kun denne løsning, når sammenhængen gør handlingen tydelig. Synlig linktekst er normalt lettere at forstå.

<a href="/tjekliste/">
  <svg aria-hidden="true" focusable="false">…</svg>
  Se tjeklisten
</a>

<button type="button" aria-label="Luk dialogen">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

Tjekliste

  • Teksten forklarer billedets formål i den konkrete sammenhæng.
  • Oplysninger, der allerede står ved siden af billedet, gentages ikke unødigt.
  • Dekorative billeder har tom alternativtekst.
  • Diagrammer og andre komplekse billeder er forklaret i brødteksten.
  • Ikoner med synlig tekst er skjult for hjælpemidler.
  • Ikoner uden synlig tekst har et navn, der beskriver handlingen.

Typiske faldgruber

  • At beskrive alle synlige detaljer uden at vurdere, hvad der er relevant.
  • At bruge samme alternativtekst, hver gang et billede genbruges.
  • At skrive filnavne som IMG_2048.jpg eller generiske tekster som foto.
  • At sætte en titel-attribut på et ikon og regne med, at det er nok.

Kilder og videre læsning

Senest gennemgået: .