Universell utforming av bilder og grafikk

Åpne bilde i et nytt vindu

CC BY-SA

Bilde: Stina Åshildsdatter Grolid

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.

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.

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.

Åpne bilde i et nytt vindu

CC BY-NC-SA

Bilde: Corbis, NTB scanpix

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.

• TPGI: Color Contrast Checker

• Adobe Color: Color Contrast Analyzer

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.

Åpne bilde i et nytt vindu

CC BY-SA

Bilde: Stina Åshildsdatter Grolid

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.

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.

Åpne bilde i et nytt vindu

CC BY-NC

Bilde: Science Photo Library, NTB

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.

Åpne bilde i et nytt vindu

CC BY-SA

Bilde: Stina Åshildsdatter Grolid