Universell utforming på nett – hva og hvorfor?

Et øye, en hånd, et øre og en hjerne rundt en datamaskin.
Temaer i dette innlegget: Design, Tilgjengelighet, Universell utforming, WCAG, WCAG 2.0, WCAG 2.1, Webdesign, Webutvikling

I dag eier stort sett alle en datamaskin og en smarttelefon, og for de aller fleste er nettet deres primære informasjonskilde. I tillegg øker antallet selvbetjente tjenester både hos offentlige og private aktører. Vi bestiller billetter, oppretter bankkontoer og sender søknader – alt på nett. Dette gjør kravet om et universelt utformet digitalt produkt som er bygget for alle, uansett alder, evner og utdanningsnivå – viktigere enn noen gang.

Universell utforming er en prosess og et virkemiddel som må tas med i hele utviklingsløpet – fra skisser, innholdsproduksjon og design til utvikling. Vi utvikler alle våre nettløsninger med universell utforming som standard.

Hva er universell utforming?

Likestillings- og diskrimineringslovens kapittel 3 stiller krav om universell utforming til alle offentlige og private virksomheter i Norge. Har du en nettside, applikasjon eller IKT-løsning som er ny eller har vært oppdatert siden 1. juli 2014, gjelder loven for deg. Det er Tilsynet for universell utforming av IKT som har ansvar for å følge opp forskriften om universell utforming i Norge. Loven definerer universell utforming slik:

Med universell utforming menes utforming eller tilrettelegging av hovedløsningen i de fysiske forholdene, inkludert informasjons- og kommunikasjonsteknologi (IKT), slik at virksomhetens alminnelige funksjoner kan benyttes av flest mulig, uavhengig av funksjonsnedsettelse.

Tanken bak universell utforming er å gjøre alle løsninger brukervennlige og tilgjengelige for alle, uavhengig av alder, funksjonsevne og utdanningsnivå. På denne måten vil så mange som mulig kunne delta i samfunnet på like vilkår. En nettløsning som er universelt utformet er enklere og bedre for alle, kan brukes på flere måter, og kan brukes av alle. Man forstår raskt at å følge kravene for universell utforming ikke kun er viktig for å holde seg innenfor loven, men også fordi det gir en reell verdi for alle dine kunder og besøkende. Nettløsningen din vil både oppleves og oppfattes bedre for brukeren og for søkemotorer som Google. Sørger du for at nettstedet ditt oppfyller kravene og er riktig utformet kan dette påvirke dets rangering på organisk SEO og det havner lenger opp i organiske søk. Dette kan resultere i at flere finner frem til din nettside, og det vil du vel?

Hva er WCAG 2.0?

WCAG (Web Content Accessibility Guidelines) en teknisk standard som definerer hvordan man gjør nettløsninger tilgjengelig for personer med funksjonsnedsettelser. Kravene om universell utforming tar utgangspunkt i WCAG 2.0. Forskriften om universell utforming krever at nettløsningen oppfyller 35 av de 61 suksesskriteriene i WCAG 2.0-standarden. Disse 35 suksesskriteriene omfatter både innhold, struktur, design og kode. De 35 obligatoriske suksesskriteriene finner du her.

Når EUs webdirektiv om universell utforming blir en del av norsk rett, er det WCAG 2.1 som vil gjelde, som blant annet innebærer 12 nye krav. Det er foreslått at regelendringene skal vedtas 1. juli 2020, med en overgangsperiode på 6 måneder. De nye kravene vil dermed være lovpålagt fra 1. januar 2021.

Fem kjappe tiltak for bedre universell utforming

Under vil jeg beskrive 5 av de 35 obligatoriske suksesskriteriene for universell utforming. Dette er kriterier som det ikke skal så mye til for å oppfylle, og som man raskt kan ettergå og verifisere selv.

Kontrast

All tekst må ha tilstrekkelig kontrast mot bakgrunnen. Dette er for å sikre god lesbarhet og er viktig for alle brukere, spesielt for svaksynte, dyslektikere og fargeblinde, og under utfordrende lysforhold.

Kravet sier at liten tekst skal ha et kontrastforhold mot bakgrunnen på 4.5:1, og stor tekst (24px eller større) 3.0:1. Noen tilfeller er unntatt kravet, herunder uvesentlig tekst som er ren dekorasjon eller del av en inaktiv brukergrensesnittkomponent, samt logoer.

Ulike kombinasjoner av tekst- og bagrunnsfarge gir forskjellige utslag på kontrastforhold.
Forskjellige kombinasjoner av bakgrunnsfarge og skriftfarge gir ulike kontrastforhold.

Det finnes mange verktøy på nettet man kan bruke for å teste dette kravet, deriblant WebAIMs Contrast Checker. Her kan du taste inn hex-verdier og få en representasjon av hvordan det ser ut, samt få kontrastforholdet og om det oppfyller kravet. Det er nivå AA som gjelder som minimumskrav i Norge.

Tastatur og synlig fokus

All funksjonalitet skal være betjenelig gjennom tastaturet. Typisk betyr dette at du skal kunne “tabbe” deg gjennom siden ved hjelp av Tab-tasten. Når du “tabber” deg gjennom siden, må elementene markeres, slik at du vet hvor på siden du befinner deg og enkelt kan navigere deg videre dit du skal.

Et blogginnlegg i et galleri over siste innlegg blir markert ved bruk av Tab-tasten.
Et element markeres ved bruk av Tab-tasten, slik at man kan trykke Enter for å navigere seg videre.

For å teste dette kan du gå inn på en hvilken som helst nettside og trykke på Tab-tasten. Tar Tab-tasten deg videre gjennom funksjonaliteten, og klarer du å navigere deg gjennom siden kun ved bruk av denne tasten?

Hoppe over blokker

Med hoppe over blokker menes det at brukeren skal ha mulighet til å hoppe direkte til hovedinnholdet. Nettsidens meny ligger typisk på toppen av siden, og det kan være tidkrevende for en besøkende som kun bruker tastatur å “tabbe” seg gjennom menyen på hver eneste side.

En typisk løsning er å legge inn en skjult lenke på toppen av hver side, som kommer til syne ved første Tab-klikk man gjør. Denne lenken tar deg ned til sidens hovedinnhold.

Visning av den skjulte knappen "Hopp til innhold" øverst på en nettside.
Lenken «Hopp til innhold» kommer til syne øverst på nettsiden første gang man trykker på Tab-tasten.

Her kan du også gå inn på en hvilken som helst nettside og trykke på Tab-tasten. Dukker det opp en snarvei til hovedinnholdet?

Overskrifter og ledetekster

Overskrifter og ledetekster skal være beskrivende for det innholdet som presenteres på gjeldende side. God tekststruktur er viktig for lesbarheten. Dette omfatter blant annet en tydelig visuell forskjell mellom overskrifter av ulike nivå, at brødtekst skiller seg tydelig fra alle overskrifter, og at koden er semantisk riktig. Sidetittelen skal kodes med elementet <h1>, deretter underoverskrifter med <h2>, <h3>, ned til <h6>.

Ulike nivåer på overskrifter med tilhørende HTML-tags.
Ulike nivåer på overskrifter med tilhørende HTML-tags.

Konsekvent identifikasjon

Elementer som har samme funksjon på tvers av flere sider skal være utformet likt. Dette betyr at for eksempel tekstlenker som fører deg videre på samme nettsted skal ha ett bestemt utseende, og knapper som utfører en handling skal ha et annet bestemt utseende. Dette er viktig for å unngå forvirring hos brukeren, slik at de vet hva de kan forvente seg når de navigerer rundt på siden din.

Tre tekstlenker med understrek og pil bak og to oransje knapper.
Elementer av samme funksjon har samme utseende.

 

Er du usikker på om din nettside, app eller løsning samsvarer med kravene om universell utforming? Ta kontakt med oss, så hjelper vi deg!

Denne nettsiden bruker Google Analytics for innsamling av informasjonskapsler. Dette sørger for full funksjonalitet, hjelper oss å tilpasse innholdet og eventuell reklame, og kan bli brukt i analyseformål. Du kan lese mer om vår personvernerklæring her.

OK!