Følgende prinsipper er sentrale for universell utforming av bilder, illustrasjoner og grafikk:

Unngå innbrent tekst, forklar i tekst i stedet.
Lag alt-tekster.
Bruk gode kontraster.
Farger må ikke være den eneste informasjonen.
Bruk oppløsning som tåler å bli forstørret.

Unngå innbrent tekst

Noen bilder inneholder tekst. Informasjon i skjermbilder, illustrasjoner, grafer og diagrammer må gjøres tilgjengelig for de som ikke ser. Bildetekster og alt-tekster kan brukes til det. Viktig innhold bør også bli forklart mer utdypende i tekst ved siden av bildet, grafikken eller illustrasjonen.

Noen ganger er teksten også innbrent og ikke mulig å markere. Da vil den ikke bli fanget opp av skjermlesere.

Bruker vi vektorformat når vi lager og lagrer visuelt innhold, kan det bli forstørret uten å tape innholdsverdi eller funksjon. Svg-filformatet gjør det mulig å markere tekst i bilder.

Lag alt-tekster

En alt-tekst er en kort, beskrivende tekst som på en nøytral måte beskriver hva som er på et bilde. I tillegg skal innholdstypen, som foto, illustrasjon eller grafikk, oppgis i alt-teksten.

Alt-teksten er ikke synlig, men blir lest opp av skjermleser for dem som bruker det hjelpemiddelet. Dersom en nettside ikke klarer å laste opp et bilde, vil alt-teksten dukke opp i stedet.

Bilder på nettsider må ha alt-attributt i koden slik at skjermlesere oppfatter disse riktig. Alt-teksten til bildet under, "To jenter som ler foran en pc. Foto.", kodes slik:

alt="To jenter som ler foran en pc. Foto."

Vær oppmerksom på at bildet under har synlig tekst: "Når vi bruker bilder på nettet, bør vi også ha en alt-tekst som beskriver innholdet i bildet." Dette er en bildetekst, ikke en alt-tekst.

Bruk gode kontraster

For brukere med nedsatt syn er det viktig at visuelt innhold har gode kontraster. Kontrast betyr at elementer er motsetninger og forskjellige fra hverandre. Når et bilde har gode kontraster, er det lettere å skille elementer fra hverandre og oppfatte hva som er på bildet.

Vi kan bruke en rekke verktøy for å analysere kontrast på bilder.

Hvis det er tekst i et bilde, skal kontrastforholdet mellom tekst og bakgrunn være minst 4,5 : 1. Mørk tekst på lys bakgrunn vil gi et høyt tall, som betyr at det er god kontrast. Svart på hvit bakgrunn vil få kontrastforholdet 21 : 1, som er en svært god og tydelig kontrast.

Lyse farger på lys bakgrunn kan få dårlig kontrast og er vanskeligere å oppfatte, for eksempel lyseblå tekst på lys grønn bakgrunn. Hvis det første tallet er lavere enn 4,5, er det for dårlig kontrastforhold.

Farger må ikke være den eneste informasjonen

Ikke alle oppfatter farger likt. Personer som er fargeblinde, oppfatter flere farger og særlig grønt på en annen måte.

Derfor er det viktig at farge i seg selv ikke er den eneste informasjonen i et bilde. "Se på det grønne feltet" vil ikke være hjelpsomt for personer som er fargeblinde. Da bør vi gi tilleggsinformasjon som "Se på feltet helt til høyre". Vi kan også bruke tekst, ikoner eller symboler for å supplere fargeinformasjonen.

Se hvordan ulike farger blir oppfattet, og last opp bilder for sjekk i verktøyet Color Blind Vision Simulator hos Pilestone.

Oppløsning som tåler å bli forstørret

Last opp bilder og illustrasjoner med god oppløsning slik at nettbrukere kan forstørre dem. Det er krav om at innhold skal kunne førstørres inntil 400 prosent med 1 280 piksler i bredde uten at funksjonalitet eller informasjon går tapt.

Hvis du jobber med illustrasjoner, er det lurt å lage vektorgrafikk, siden det tåler å bli forstørret i det uendelige. Svg-filformatet tåler godt forstørrelse.

Jpeg-bilder taper kvalitet ved forstørrelse. Pass på at du kan forstørre bilder mye uten at oppløsningen blir for dårlig.

Tips ved bruk av grafikk

Ved siden av grafikk kan det skrives et avsnitt om innholdet i grafikken. Slik kan viktig informasjon formidles også til dem som ikke kan se.

Gjennom visuell støtte av tallmaterialet hjelper vi personer som sliter med tallforståelse eller lesing og skriving.

Grafikk med tekst og bilder kan følge flere prinsipper for universell utforming. Vi kan

bruke gode fargekontraster og bruke fargekontrastverktøy som Adobe Color Contrast Analyzer for å sjekke kontrasten
plassere tekst og tall ved siden av hverandre
la være å bare bruke farger for å gi informasjon
beskrive innholdet i et tekstavsnitt
oppgi tallmateriale i en tabell ved siden av
bruke vektorformat slik at teksten kan forstørres og lagres som svg-fil, slik at teksten er markerbar

Se gjerne Uutilsynets veiledning om bruk av bilder og grafikk for mer om grafikk og tekst i bilder.

Beskrivelse av grafikk av kornavling

Grafikken viser et kakediagram med fire deler. I hver del står det både korntype og tall. Slik kan vi enkelt knytte kakedelene med datamaterialet.

I tillegg er det lagd små bokser ved siden av med lik farge, tekst med korntype og tall.

Det er valgt god kontrast mellom bakgrunn og tekst i kakestykkene.

Kontrastforhold mellom bakgrunn og tekst i grafikken

hvete: svart tekst på oransje bakgrunn (8,23 : 1)
rug: svart tekst på grå bakgrunn (9,71 : 1)
bygg: svart tekst på gul bakgrunn (13,6 :1 )
havre: svart tekst på grønn bakgrunn (11,43 : 1)

Kilder

Det Norske Akademis ordbok. (u.å.). Grafisk. Hentet 24. april 2022 fra
https://naob.no/ordbok/grafisk

Tilsynet for universell utforming av ikt. (u.å.). Bilder og grafikk. Hentet 14. april 2022 fra
https://www.uutilsynet.no/veiledning/bilder-og-grafikk/205

Tilsynet for universell utforming av ikt. (u.å.). Bruk av farger. Hentet 14. april 2022 fra https://www.uutilsynet.no/veiledning/bruk-av-farger/206

Tilsynet for universell utforming av ikt. (u.å.). Tekstalternativ. Hentet 14. april 2022 fra https://www.uutilsynet.no/wcag-standarden/11-tekstalternativ/715

Tilsynet for universell utforming av ikt. (u.å.). WCAG 2.1-standarden. Hentet 14. april 2022 fra https://www.uutilsynet.no/fremtidig-regelverk/wcag-21-standarden/140

Siden har flyttet, men du finner den her: