Desse prinsippa er sentrale for universell utforming av bilete, illustrasjonar og grafikk:

Unngå innbrend tekst, forklar i tekst i staden.
Lag alt-tekstar.
Bruk gode kontrastar.
Fargar må ikkje vere den einaste informasjonen.
Bruk oppløysing som toler å bli forstørra.

Unngå innbrend tekst

Nokre bilete inneheld tekst. Informasjon i skjermbilete, illustrasjonar, grafar og diagram må gjerast tilgjengeleg for dei som ikkje ser. Bilettekstar og alt-tekster kan brukast til det. Viktig innhald bør òg forklarast meir utdjupande i tekst ved sida av biletet, grafikken eller illustrasjonen.

Nokre gonger er teksten òg innbrend og ikkje mogleg å markere. Då vil han ikkje bli fanga opp av skjermlesarar.

Bruker vi vektorformat når vi lagar og lagrar visuelt innhald, kan det bli forstørra utan å tape innhaldsverdi eller funksjon. Svg-filformatet gjer det mogleg å markere tekst i bilete.

Lag alt-tekstar

Ein alt-tekst er ein kort, beskrivande tekst som på ein nøytral måte beskriv kva som er på eit bilete. I tillegg skal innhaldstypen, som foto, illustrasjon eller grafikk, nemnast i alt-teksten.

Alt-teksten er ikkje synleg, men blir lesen opp av skjermlesar for dei som bruker det hjelpemiddelet. Dersom ei nettside ikkje klarer å laste opp eit bilete, vil alt-teksten dukke opp i staden.

Bilete på nettsider må ha alt-attributt i koden slik at skjermlesarar oppfattar desse rett. Alt-teksten til biletet under, "To jenter som ler framfor ein pc. Foto.", blir koda slik:

alt="To jenter som ler framfor ein pc. Foto."

Ver merksam på at biletet under har synleg tekst: "Når vi bruker bilete på nettet, bør vi òg ha ein alt-tekst som beskriv innhaldet i biletet." Dette er ein bilettekst, ikkje ein alt-tekst.

Bruk gode kontrastar

For brukarar med nedsett syn er det viktig at visuelt innhald har gode kontrastar. Kontrast betyr at element er motsetningar og ulike frå kvarandre. Når eit bilete har gode kontrastar, er det lettare å skilje element frå kvarandre og oppfatte kva som er på biletet.

Vi kan bruke ei rekke verktøy for å analysere kontrast på bilete.

Dersom det er tekst i eit bilete, skal kontrastforholdet mellom tekst og bakgrunn vere minst 4,5 : 1. Mørk tekst på lys bakgrunn vil gi eit høgt tal, som betyr at det er god kontrast. Svart på kvit bakgrunn vil få kontrastforholdet 21 : 1, som er ein svært god og tydeleg kontrast.

Lyse fargar på lys bakgrunn kan få dårleg kontrast og er vanskelegare å oppfatte, til dømes lyseblå tekst på lys grøn bakgrunn. Dersom det første talet er lågare enn 4,5, er det for dårleg kontrastforhold.

Fargar må ikkje vere den einaste informasjonen

Ikkje alle oppfattar fargar likt. Personar som er fargeblinde, oppfattar fleire fargar og særleg grønt på ein annan måte.

Derfor er det viktig at farge i seg sjølv ikkje er den einaste informasjonen i eit bilete. "Sjå på det grøne feltet" vil ikkje vere hjelpsamt for personar som er fargeblinde. Då bør vi gi tilleggsinformasjon som "Sjå på feltet heilt til høgre". Vi kan òg bruke tekst, ikon eller symbol for å supplere fargeinformasjonen.

Sjå korleis ulike fargar blir oppfatta, og last opp bilete for sjekk i verktøyet Color Blind Vision Simulator hos Pilestone.

Oppløysing som toler å bli forstørra

Last opp bilete og illustrasjonar med god oppløysing slik at nettbrukarar kan forstørre dei. Det er krav om at innhald skal kunne førstørrast inntil 400 prosent med 1 280 pikslar i breidda utan at funksjonalitet eller informasjon går tapt.

Dersom du jobbar med illustrasjonar, er det lurt å lage vektorgrafikk, sidan det toler å bli forstørra i det uendelege. Svg-filformatet toler godt forstørring.

Jpeg-bilete taper kvalitet ved forstørring. Pass på at du kan forstørre bilete mykje utan at oppløysinga blir for dårleg.

Tips ved bruk av grafikk

Ved sida av grafikk kan det skrivast eit avsnitt om innhaldet i grafikken. Slik kan viktig informasjon formidlast òg til dei som ikkje kan sjå.

Gjennom visuell støtte av talmaterialet hjelper vi personar som slit med talforståing eller lesing og skriving.

Grafikk med tekst og bilete kan følge fleire prinsipp for universell utforming. Vi kan

bruke gode fargekontrastar og bruke fargekontrastverktøy som Adobe Color Contrast Analyzer for å sjekke kontrasten
plassere tekst og tal ved sida av kvarandre
la vere å berre bruke fargar for å gi informasjon
beskrive innhaldet i eit tekstavsnitt
gi talmateriale i ein tabell ved sida av
bruke vektorformat slik at teksten kan forstørrast og lagrast som svg-fil, slik at teksten kan markerast

Sjå gjerne Uutilsynets rettleiing om bruk av bilete og grafikk for meir om grafikk og tekst i bilete.

Skildring av grafikk av kornavling

Grafikken viser eit kakediagram med fire delar. I kvar del står det både korntype og tal. Slik kan vi enkelt knyte kakedelane med datamaterialet.

I tillegg er det laga små boksar ved sida av med lik farge, tekst med korntype og tal.

Det er valt god kontrast mellom bakgrunn og tekst i kakestykka.

Kontrastforhold mellom bakgrunn og tekst i grafikken

kveite: 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øn bakgrunn (11,43 : 1)

Kjelder

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

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

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

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

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

Sida har flytta, men du finn ho her: