Alternativ tekst til bilder

Vanligvis skal det legges til alternativ tekst til bilder. Dette trengs for at de som ikke kan se bildene skal få en forklaring.

Retningslinjer for tilgjengelig webinnhold (WCAG) krever at du har et tekstalternativ til det som ikke er tekst (SK 1.1.1).

Den alternative teksten bør ikke starte med «grafikk», «bilde» eller liknende (hvis ikke dette er viktig). Skjermlesere sier «grafikk», og da leses det opp to ganger: «Grafikk bilde av …».

Publiseringssystemer (CMS) har felt for alternativ tekst. Nedenfor ser du hvordan HTML-koden skal være.

Alternativ tekst til grafikk plasseres som oftest i alt-attributtet.

<img src="..." alt="forklaring av bildet" />

Grafiske lenker skal alltid ha en alternativ tekst, og teksten skal vanligvis si noe om hva lenken peker til:

MediaLT

<a href="http://www.medialt.no"><img src="Medialt_logo.jpg" alt="MediaLT" /></a>

Brukes bildet nedenfor som lenke kan det kanskje være ønskelig å formidle budskapet. Også i slike tilfeller er det likevel normalt best å beskrive målet:

MediaLT

<a href="http://www.medialt.no"><img src="Medialt_stripe.jpg" alt="MediaLT" /></a>

Hvis det samme bildet ikke er en lenke kan teksten i bildet brukes som alternativ tekst, eller hele stripen forklares (eventuelt med en lang bildebeskrivelse):

MediaLT gjør begrensninger til muligheter

<img src="Medialt_stripe.jpg" alt="MediaLT gjør begrensninger til muligheter" />

For bilder i artikler etc. er det greit å gi en kort, nøktern forklaring:

Portrett av Morten Tollefsen, smiler

<img src="Morten_portrett.jpg" alt="Portrett av Morten Tollefsen, smiler" />

Grafisk pynt trenger nesten aldri alternativ bildetekst. Alt-attributtet kan være tomt eller bildet kan skyves til bakgrunnen:

<img src="pilhøyre_pynt.jpg" alt="" />

Bakgrunnsbilder (CSS) er ikke synlige for skjermlesere:

CSS:
p.bg {
background-image: url(pilhoyre_pynt.png);
background-repeat: no-repeat;
background-position: left center;
height: 315px;
width: 70px;
}

HTML:
<p class="bg">