Hopp til innhald

Fagstoff

Universell utforming av bilete og grafikk

For personar utan syn eller med nedsett syn gir eit bilete lite informasjon. Korleis sørger vi for at bilete og grafikk er universelt utforma?
To elevar samarbeider og ser på grafisk design på pc. Foto.
Opne bilete i eit nytt vindauge

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

  • Unngå innbrunnen 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å innbrunnen 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 innbrunnen og ikkje mogleg å markere. Då vil han ikkje bli fanga opp av .

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 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.

To jenter som ler framfor ein pc. Foto.
Opne bilete i eit nytt vindauge

Bruk gode kontrastar

For brukarar med nedsett syn er det viktig at visuelt innhald har gode . 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.

Til venstre står det "Hei!" i ein kvit sirkel på ein svart firkant. Til høgre står det "Hei!" i ein lysegrøn sirkel på ein lysblå firkant. Illustrasjon.
Opne bilete i eit nytt vindauge

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.

Fem personar, to av dei sit, og resten står bak dei. Biletet er delt i to. Til venstre har biletet dårleg oppløysing, og personane er utydelege. Til høgre har biletet betre oppløysing, og personane er langt enklare å sjå. Fotokollasj.
Opne bilete i eit nytt vindauge

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.

Kornavling i Norge i 2020 vist med kakediagram. Tall i tusen tonn. Størst andel er bygg med  606 tusen tonn, nest størst er hvete med 303 tusen tonn, tredje størst er havre med 294 tusen tonn. Klart minst er rug og rughvete med 36 tusen tonn. Grafikk.
Opne bilete i eit nytt vindauge
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

CC BY-SASkrive av Stina Åshildsdatter Grolid.
Sist fagleg oppdatert 06.04.2022

Læringsressursar

Universell utforming