Tilgjengelighet for bilder og Illustrasjoner

Innhold eller motiv i bilder og illustrasjoner må være tilgjengelig for alle brukere. Det vil i praksis si at alle bilder og illustrasjoner også må ha et tekstalternativ som beskriver bildets motiv. I dokumenter kalles tekstalternativ for alternativ tekst, på HTML-sider brukes forkortelsen alt-tekst.

For å "beskrive bildets motiv" kan du tenke deg hvordan du ville beskrevet bildet til en venn du snakker med i telefonen.

Unntaket er hvis bildet eller illustrasjonen bare er til pynt eller brukt for å bygge grafisk design. Da er de uten relevant meningsinnhold, og kalles dekorative. Dekorative bilder skal ikke ha alt-tekst.

Komplekse bilder, det vil si bilder med mye meningsinnhold, diagrammer, grafer, kart og liknende, skal ha både et kort tekstalternativ som beskriver bildets motiv, og et utfyllende tekstalternativ som gir samme informasjon som bildet.

Hvordan ivareta kravene til universell utforming av bilder

Alt-tekst i HTML

I en HTML-editor får en bilde-tag (<img>) alltid opprettet en alt-attributt automatisk. Før du legger inn selve alt-teksten vil denne attributten enten være tom, eller arve filnavnet. En tom alt-tekst ser slik ut:

Med alt-tekst ser den slik ut:

Nå vil en skjermleser eller annen teknologi kunne formidle bildets motiv til alle brukere.

I Canvas kan du enkelt legge inn alt-tekst ved hjelp av valget for bildealternativer i editoren, eller du kan bruke Ally.

Se ellers modul 4.

Dekorative bilder

Dekorative bilder, altså bilder uten relevant meningsinnhold, skal også ha en alt-attributt, men den skal være tom, altså:

Da blir bildet ignorert av hjelpemiddelteknologier. Å merke et bilde som dekorativt gjør du i samme dialogvindu som der du legger inn alternativ tekst (alt-tekst). Typisk vil dekorative bilder være illustrasjoner som bare er til pynt, ikoner, logoer, eller linjer og bokser som brukes for å bygge grafisk design.

Bilder som brukes som lenke

Hvis du bruker bildet som lenke, er det lenkens mål som skal beskrives først i alt-teksten, deretter eventuelt motivet i bildet.

Her er det vist at lenkemålet er en annen html-side som handler om Exphil på Bali. (selve lenken får en selvstendig html-kode (<a href>) og synes ikke i eksempelet). Resten av alt-teksten beskriver motivet i bildet.

Et godt råd er å alltid legge inn en lenke med en beskrivende lenketekst og lenkens mål under bildet. Hvis lenketeksten er fullt ut beskrivende, som den burde være, skal et lenket bilde ha tom alt-attributt. Dette er for å unngå å skape kluss for brukere med hjelpemiddelteknologier. Altså markerer du da bildet som dekorativt.

Bilder av tekst

Bilder av tekst skal ha en alt-tekst som er lik teksten på bildet. Men tekst som bilde burde så langt det er mulig unngås.

Et unntak er tekst som med fordel kan legges inn i bilder, for eksempel i visualiserte datasett (diagrammer og liknende). Da legger du tekst direkte inn på bildet som et supplement til grafikken. I tillegg bruker du en alt-tekst som beskriver motiv, formål eller hovedinformasjon for bildet. Samtidig skal du presentere den detaljerte informasjonen som utfyllende tekst, gjerne i en tabell.

Komplekse bilder

Komplekse bilder er bilder som inneholder for mye informasjon til å bli beskrevet med én setning. For eksempel:

Bilder med mye meningsinnhold
Diagrammer
Grafer og statistikk
Kart, tidslinjer og liknende

Slike bilder skal ha en kort alt-tekst for å beskrive bildets motiv. I tillegg må bildet ha et utfyllende tekstalternativ, det vil si en detaljert tekstlig representasjon av hovedinnholdet i bildet. Denne legger du som tekst, punktliste eller tabell i forbindelse med bildet.

Sektordiagram over mest brukte nettlesere 2021

^{Illustrasjon hentet fra UUtilsynets løsningsforslag for bilder og grafikk}

Her er alt-tekst i koden: alt="Sektordiagram over mest brukte nettlesere 2021"

Det utfyllende tekstalternativet er laget som punktliste:

Firefox 45,0 %
Internet Explorer 26,8 %
Chrome 12,8 %
Safari 8,5 %
Opera 6,2 %
Andre 0,7 %

Kort sagt

Bilder skal ha et tekstalternativ. På nettsider og i dokumenter kalles tekstalternativet for alternativ tekst eller alt-tekst. Tekstalternativet skal kort beskrive bildets motiv, og med det gi brukeren samme informasjon som bildet gir visuelt.

Komplekse bilder skal ha både et kort tekstalternativ som beskriver bildets motiv og et utfyllende tekstalternativ som gir samme, utdypende informasjon som det bildet gir.

Bilder som bare er til pynt skal markeres som dekorative.

Hvorfor er det viktig å gi brukerne er tekstalternativ?

Med alternativ tekst, og eventuelt utfyllende tekstalternativ, kan hjelpemiddelteknologi presentere det ikke-tekstlige innholdet på en måte som passer brukerens behov. Dette er altså nyttig for alle brukere, ikke bare de som er avhengig av hjelpemidler.

Forskjellen på billedtekst, alternativ tekst og utfyllende alternativ tekst

Du kan legge en billedtekst under bildet, men det er ikke det samme som en alternativ tekst (eller alt-tekst). Alternativ tekst blir lagt inn i HTML-sidens eller dokumentets kode, og blir synlig på skjermen dersom brukere slår av bildevisning. Alternativ tekst blir også lest opp av en skjermleser. Alternativ tekst skal beskrive bildets motiv. Mens billedteksten også kan formidle formål med bildet, kontekst, assosiasjoner, kilde eller annet.

Exphil på Bali. Utsikt til strand og hav med blå, skyfri himmel

^{Utveksling på Bali. Foto: Wikimedia commons}

Her er billedteksten den du ser under bildet; "Utveksling på Bali. Foto: Wikimedia commons". Mens alt-tekst er lagt inn som "Bildet viser en strand med azurblått hav og blå himmel."

For komplekse bilder kan utfyllende tekstalternativ lages som egen brødtekst eller i tabell i tilknytning til bildet. Utfyllende tekstalternativ vil si en detaljert tekstlig representasjon av hovedinnholdet i bildet.

Anbefalinger utover kravene

Det kan være relevant for brukerne å få vite om det er et foto, en illustrasjon eller grafikk. Denne informasjonen bør du legge konsekvent sist, ettersom det er motiv (eller lenkemål) som skal komme først.

Relevante lenker

UiOs veiledning for bruk av bilder (uio.no)

Krav

Bilder som er meningsbærende skal ha et kort tekstalternativ som beskriver bildets motiv, for eksempel en alt-tekst.

Bilder som er komplekse skal ha både et kort tekstalternativ som beskriver bildets motiv, og et utfyllende tekstalternativ som gir samme informasjon som bildet.

Lenkende bilder skal ha informasjon om lenkemålet.

Bilder som er pynt skal ha tomt alt-attributt (markeres som dekorativt).

WCAG-standarden: 1.1.1 Ikke-tekstlig innhold (uutilsynet.no)

WCAG-standarden: 1.4.5 Bilder av tekst (uutilsynet.no)