Bilder og grafikk

Bilder og grafikk er viktig for mange brukere – en betydelig andel brukere trenger supplerende materiale for å forstå informasjon gitt i tekst. Benytter du bare bilder og illustrasjoner risikerer du derimot å utestenge brukere.

Introduksjon

Mange nettsteder baserer seg i veldig stor grad på tekst. Bilder er ikke uvanlig som et supplement, men brukes ofte bare som dekorasjon. For å oppnå maksimal universell utforming er det en generell anbefaling å benytte alle passende virkemidler for å nå frem med ditt budskap. Bilder, illustrasjoner og multimedia er de mest effektfulle, men enkel, tydelig tekst og lydklipp kommer også høyt på listen.

Løsninger som møter kravene i forskriften

Alternativ bildetekst

Innhold eller motiv i bilder og illustrasjoner må formidles korrekt til alle brukere. Hvis bildet er lenket, er det viktig at lenkens mål fremgår tydelig. Både motiv og lenkemål formidler du ved å bruke alternativ bildetekst (alt-tekst). Den alternative teksten lar deg styre hva brukere som har slått av bildevisning eller ikke kan se bildene får presentert.

Alle bilder i HTML skal ha alt-attributt, hvis ikke kan du risikere at bildets filplassering og filnavn blir lest opp av hjelpemiddel, i stedet for en alt-tekst. Dette kan være svært forstyrrende. Hvis du bruker publiseringsverktøy, skal dette sørge for at bilder blir utstyrt med alt-attributtet.

Dekorative bilder

Rent dekorative bilder er blant annet bilder som er brukt for å bygge grafisk design for nettstedet. Disse skal ha alt-attributt, men det skal være tomt: alt="". Det vil være enda bedre om disse bildene er lagt inn ved hjelp av CSS. 

Rent grafiske elementer skal ikke formidles av skjermlesere, og skal derfor ha tom alt-tekst.
 
 

Kode for tom alt-tekst:

<img src=“skillelinje.png“ alt=““>

Ikke lenkede bilder

Bilder skal ha alt-tekst som beskriver bildets motiv. Ofte suppleres bilder i redaksjonelt innhold med en synlig bildetekst som formidler formålet med bildet eller lignende. Dette er noe annet enn den alternative teksten, som skal beskrive bildets motiv.

For mer detaljerte anbefalinger om alt-tekster, se under “Hvordan du skriver alt-tekster“ lenger ned. 

Eksempel på bilde og tilhørende alt-tekst:

Sammenligning mellom alt-tekst og synlig bildetekst: Alt-tekst: Tre gamle tretraller. Synlig bildetekst: Hvis barna blir slitne, kan du trille dem rundt i dyreparken.
 
 

Anbefalt HTML5-kode for bildetekst:

<figure>
<img src="https://uu.difi.no/traller.jpg" alt="Tre gamle tretraller. Foto.">
<figcaption>Gamle tretraller regnes av mange som antikviteter.</figcaption>
</figure>

Lenkede bilder

Alt-teksten blir lenketeksten for sterkt svaksynte brukere med skjermleser. Bilder som er det eneste lenkede elementet skal derfor ha en alternativ tekst som er fullt beskrivende for lenkens mål, uavhengig av bildets motiv. Det holder for eksempel ikke med "Facebook" hvis målet er den spesifikke virksomhetens side på Facebook.

Eksempel på lenket bilde med alt-tekst som beskriver lenkemål:

Alt-tekst som beskriver lenkens mål, Boligsparing for ungdom, i stedet for bildets motiv, knust sparegris. Klikk for større bilde.
 
 

Kodeeksempel:

<a href=“BSU.html“><img src=“sparegris.jpg“ alt=“Boligsparing for ungdom“></a>

Det er vanlig med et bilde sammen med tekst for å lage en lenke, for eksempel ikon for utskrift sammen med teksten “Skriv ut“. I så fall blir lenketeksten summen av den alternative teksten og synlig lenket tekst. Når den synlige teksten er fullt beskrivende, som er en fordel for mange brukere, skal bildet ha tom alt-attributt for ikke å forstyrre lenketeksten som skjermleser formidler. Bildet kan gjerne legges inn med CSS i stedet.

Skriv ut-ikon sammen med fullverdig tekst, bildet kan gjerne legges inn med CSS:

 Skriver

Bilder av tekst

Tekst skal du så langt som mulig presentere som tekst, og ikke som bilde av tekst. Dette fordi tekstkvaliteten blir dårlig ved forstørring, og hjelpemiddel for dyslektikere ikke kan dra nytte av teksten i bildet.

Bilde av tekst som er forstørret, slik at tekstkvaliteten blir dårlig
 
 

Det finnes unntak; for eksempel er det vanligvis nødvendig med tekst i diagrammer og organisasjonskart. Alt-teksten skal da kort beskrive formål og hovedinformasjon for bildet. Samtidig skal du presentere den detaljerte informasjonen i form av tekst.

Eksempel på illustrasjon og tilhørende tekstversjon:

Bruk bilder og grafikk for å øke forståelsen av innholdet og presenter også informasjon i form av tekst. Eksempel: Kakediagramm med tilknyttete ledetekster.

Tekstversjon:

Besøksstatistikk, fordeling mellom nettlesere:

  • Firefox 45.0 %
  • Internet Explorer 26.8 %
  • Chrome 12.8 %
  • Safari 8.5 %
  • Opera 6.2 %
  • Andre 0.7 %

Ofte er tekst satt inn i bildet for å oppnå en spesiell effekt eller plassering relatert til bildet. Dette kan du i de fleste tilfeller løse vel så bra ved hjelp av vanlig tekst sammen med CSS-formatering, og da får du tekst som oppfører seg som brukeren forventer og trenger. Hvis du likevel må plassere tekst i bildet, må du være spesielt nøye med alt-teksten, og dessuten tilby en versjon der tekststørrelsen er minst tre ganger vanlig brødtekst.

Anbefalinger utover kravene i forskriften

Hvordan du skriver alt-tekster

Det er viktig å ha interne retningslinjer for hvordan skrive alt-tekster. Alle alt-tekster på nettstedet bør være konsekvent utformede. Skriv kort og begynn med det viktigste. Det er også relevant for sterkt svaksynte brukere å få vite om det er et foto, en illustrasjon eller grafikk. Denne informasjonen bør i så fall komme konsekvent sist, ettersom spesifikk informasjon skal komme først.

Lenkede bilder

Dersom bildet skal være det eneste lenkede elementet, bør det fremstå visuelt som klikkbart. Dette kan for eksempel være i form av et ikon i eller på bildet som indikerer lenke. Sørg også for at størrelsen gjør bildet lett å treffe med mus og på berøringsskjerm.

Enkelte bilder er ikke mulig å endre på, som for eksempel logoer. Da er det viktig at situasjonen tilsier at dette er klikkbart. For eksempel er de fleste seende brukere vant med at virksomhetens logo oppe til venstre på en nettside er klikkbar og leder til startsiden.

På lenkede bilder kan du gjerne avslutte alt-teksten med en beskrivelse av bildets motiv. Eksempel: Boligsparing for ungdom. Sparegris med plaster og penger rundt. Foto.

Omkringliggende tekst som ikke er lenket kan gi informasjon om lenkers funksjon, for eksempel logoer til sosiale medier ledsaget av tekst som "følg oss sosiale medier". Bruk dette med forsiktighet, ettersom en del brukere med kognitive nedsettelser trenger tydelige tegn på klikkbarhet.

Illustrasjon av lenker til sosiale medier - overskrift som skaper kontekst, men logoene må fremdeles ha fullverdig alt-tekst.
 
 

Høyoppløst bilde av tekst

Dersom du må presentere tekst i form av bilde, bør du tilby en høyoppløst versjon av bildet, slik at brukere som behøver forstørring kan ta del i informasjonen uten vesentlig kvalitetstap på teksten. Et godt alternativ er å bruke SVG-formatet, som er et vektorformat for diagrammer, illustrasjoner og lignende.

Publisert: 17. Apr 2015, Sist endret: 23. jan 2018

Deldette

Fant du det du lette etter?

Stjerne(*) er obligatoriske felter som du må fylle ut for å sende skjemaet. 

MERK: Du får ikke svar på denne meldingen. Har du spørsmål du ønsker svar på send oss en e-post til uu@difi.no.

Fant du det du lette etter?
*