Kontakt oss

WCAG og universell utforming

På denne siden finner du alle WCAG-kravene som inngår i regelverket. Offentlig sektor skal følge 47 krav (+ ett krav om synstolking fra 2024), men privat sektor skal følge 35 krav. På Digitaliseringsdirektoratets nettsider finner man løsningsforslag, ressurser og artikler for de forskjellige emnene.

Innholdsfortegnelse

Gjeldende regelverk, krav og løsningsforslag for nettsider

Gjeldende regelverk og krav

Forskrift om universell utforming av ikt peker på minimumskrav for nettløsninger og automater. Fra 2021 gjelder minstekravene uavhengig av løsningens alder.

Kilde: uutilsynet.no

Løsningsforslag for nettsider

I veiledningen finner du eksempler og løsningsforslag for å møte lovkravene. Husk at det er flere måter å løse kravene på. Vi skiller mellom minstekravene i forskriften og det du kan gjøre i tillegg.

Kilde: uutilsynet.no

Hvem gjelder det for?

Ikt-løsninger i Norge skal være universelt utformet. Dette gjelder nettløsninger, apper og automater. Både private og offentlige virksomheter, lag og organisasjoner må følge regelverket.

For at reglene skal gjelde, må virksomheten ha en nettside, applikasjon eller automat (en ikt-løsning) som er:

Dersom du svarer ja på disse punktene, gjelder reglene for virksomheten.

Reglene gjelder uansett hvor mange ansatte virksomheten har, hvilken omsetning eller organisasjonsform den har.

Øverste leder har ansvaret for at virksomheten følger reglene om universell utforming av ikt.

Trenger du hjelp med WCAG og universell utforming av dine nettsider?

Våre designere og utviklere er godt kjent med regelverket og står klare til å bistå deg med utforming og programmering av dine nettsider! 

Kontakt oss for en uforpliktende samtale.

WCAG 2.0 Privat sektor

Private virksomheters nettløsninger skal minimum utformes i samsvar med 35 suksesskriterium i WCAG 2.0, eller tilsvarende. Dette er suksesskriteriene på nivå A og AA, med unntak av suksesskriteriene 1.2.3, 1.2.4 og 1.2.5.

Sjekkliste WCAG 2.0

1.1.1 Ikke-tekstlig innhold (Nivå A)

Gi brukeren et tekstalternativ for innhold som ikke er tekst.

1.2.1 Bare lyd og bare video (forhåndsinnspilt, Nivå A)

Gi brukeren et alternativ når innholdet presenteres kun som video eller lyd.

1.2.2 Teksting (forhåndsinnspilt, Nivå A)

Tilby teksting for forhåndsinnspilt video med lyd.

1.3.1 Informasjon og relasjoner (Nivå A)

Ting skal være kodet som det ser ut som.

1.3.2 Meningsfylt rekkefølge (Nivå A)

Presenter innhold i en meningsfull rekkefølge.

1.3.3 Sensoriske egenskaper (Nivå A)

Instruksjoner må ikke utelukkende være avhengige av form, størrelse, visuell plassering, orientering, eller lyd for å kunne bli forstått.

1.4.1 Bruk av farge (Nivå A)

Ikke bruk presentasjon som bygger utelukkende på farge.

1.4.2 Styring av lyd (Nivå A)

Gi brukeren mulighet til å stoppe eller pause lyd som starter automatisk.

1.4.3 Kontrast (minimum, Nivå AA)

Kontrastforholdet mellom teksten og bakgrunnen er minst 4,5:1.

1.4.4 Endring av tekststørrelse (Nivå AA)

Tekst kan bli endret til 200 % størrelse uten tap av innhold eller funksjon.

1.4.5 Bilder av tekst (Nivå AA)

Bruk tekst i stedet for bilder av tekst.

2.1.1 Tastatur (Nivå A)

All funksjonalitet skal kunne brukes kun ved hjelp av tastatur.

2.1.2 Ingen tastaturfelle (Nivå A)

Unngå tastaturfeller.

2.2.1 Justerbar hastighet (Nivå A)

Tidsbegrensninger skal kunne justeres av brukeren.

2.2.2 Pause, stopp, skjul (Nivå A)

Gi brukeren mulighet til å stoppe, pause eller skjule innhold som automatisk endrer seg.

2.3.1 Terskelverdi på maksimalt tre glimt (Nivå A)

Innhold skal ikke blinke mer enn tre ganger per sekund.

2.4.1 Hoppe over blokker (Nivå A)

Gi brukeren mulighet til å hoppe direkte til hovedinnholdet.

2.4.2 Sidetitler (Nivå A)

Bruk nyttige og tydelige sidetitler.

2.4.3 Fokusrekkefølge (Nivå A)

Presenter innholdet i en logisk rekkefølge.

2.4.4 Formål med lenke (i kontekst, Nivå A)

Alle lenkers mål og funksjon fremgår tydelig av lenketeksten.

2.4.5 Flere måter (Nivå AA)

Tilby brukeren flere måter å navigere på.

2.4.6 Overskrifter og ledetekster (Nivå AA)

Sørg for at ledetekster og overskrifter er beskrivende.

2.4.7 Synlig fokus (Nivå AA)

Sørg for at alt innhold får synlig fokus når du navigerer med tastatur.

3.1.1 Språk på siden (Nivå A)

Sørg for at språket til innholdet på alle nettsider er angitt i koden.

3.1.2 Språk på deler av innhold (Nivå AA)

Sørg for at alle deler av innholdet som er på et annet språk enn resten av siden er markert i koden.

3.2.1 Fokus (Nivå A)

Når en komponent kommer i fokus medfører dette ikke automatisk betydelige endringer i siden.

3.2.2 Inndata (Nivå A)

Endring av verdien til et skjemafelt medfører ikke automatisk betydelige endringer i siden.

3.2.3 Konsekvent navigering (Nivå AA)

Navigasjonslinker som gjentas på flere sider skal ha en konsekvent rekkefølge.

3.2.4 Konsekvent identifikasjon (Nivå AA)

Elementer som har samme funksjonalitet på tvers av flere sider er utformet likt.

3.3.1 Identifikasjon av feil (Nivå A)

For feil som oppdages automatisk må du vise hvor feilen har oppstått og gi en tekstbeskrivelse av feilen.

3.3.2 Ledetekster eller instruksjoner (Nivå A)

Det vises ledetekster eller instruksjoner når du har skjemaelementer som må fylles ut.

3.3.3 Forslag ved feil (Nivå AA)

Dersom feil blir oppdaget automatisk, gi brukeren et forslag til hvordan feilen kan rettes.

3.3.4 Forhindring av feil (juridiske feil, økonomiske feil, datafeil, Nivå AA)

For sider som medfører juridiske forpliktelser må det være mulig å kunne angre, kontrollere eller bekrefte dataene som sendes inn.

4.1.1 Parsing (oppdeling, Nivå A)

Alle sider skal være uten store kodefeil.

4.1.2 Navn, rolle, verdi (Nivå A)

Alle komponenter har navn og rolle bestemt i koden.

WCAG 2.1 Offentlig sektor

Offentlige virksomheters nettløsninger skal utformes på en måte som gjør at innholdet er mulig å oppfatte, mulig å betjene, er forståelig og robust. For virksomheter i offentlig sektor gjelder alle krav for WCAG 2.0 i privat sektor,  tillegg til 12 ekstra krav i WCAG 2.1. 
Fra 2024 vil også kravet om synstolking (1.2.5) bli gjeldende.

I tillegg til de tekniske kravene, må offentlige virksomheter ha ei oppdatert tilgjengelighetserklæring på alle sine applikasjoner og nettsteder.

Sjekkliste WCAG 2.1

1.2.5 Synstolking (forhåndsinnpilt, Nivå AA)

Tilby synstolking til alle videoer som ikke er direktesendinger.

1.3.4 Visningsretning (Nivå AA)

Brukeren må få velge om innholdet skal vises i liggende eller stående retning.

1.3.5 Identifiser formål med inndata (Nivå AA)

Skjemaelementer er kodet med inndataformål.

1.4.10 Dynamisk tilpasning (Reflow. Nivå AA)

Innhold skal kunne endres til 400 prosent størrelse ved 1280 piksler bredde, uten tap av informasjon eller funksjonalitet.

1.4.11 Kontrast for ikke-tekstlig innhold (Nivå AA)

Ikke-tekstlig innhold skal ha et kontrastforhold på minst 3:1 mot farge(r) som ligger ved siden av.

1.4.12 Tekstavstand (Nivå AA)

Tekstavstanden skal kunne overstyres for å gjøre teksten lettere å lese.

1.4.13 Pekerfølsomt innhold eller innhold ved tastaturfokus (Nivå AA)

Brukeren skal ha mer kontroll over innholdet på nettsiden som får fokus med musepeker eller tastatur.

2.1.4 Hurtigtaster som består av ett tegn (Nivå A)

Brukeren skal enkelt kunne slå av hurtigtaster som består av ett tegn.

2.5.1 Pekerbevegelser (Nivå A)

Innhold på nettsiden skal kunne brukes med enkel pekerinput.

2.5.2 Pekeravbrytelse (Nivå A)

Uheldige og feilaktige input via mus eller berøringsskjerm skal lettere kunne forhindres.

2.5.3 Ledetekst i navn (Nivå A)

Brukere som bruker visuelle ledetekster skal også kunne bruke kodede ledetekster.

2.5.4 Bevegelsesaktivering (Nivå A)

Funksjonalitet som kan betjenes med å bevege enheten eller ved brukerbevegelse, skal også kunne betjenes med brukergrensesnittkomponenter.

4.1.3 Statusbeskjeder (Nivå AA)

Brukeren skal få statusbeskjeder om viktige endringer på nettsiden uten at det gir kontekstendring.

Testrutiner for universell utforming

Sjekk nettstedet selv

En viktig del av kvalitetsarbeidet er å ta noen steg tilbake og teste ut hvordan løsningen fungerer. Når du tester selv, kan du finne mange problemer som brukerne kan støte på. Ved å teste selv er samtidig veien kort til å få gjort noe med det du oppdager.

Kilde: uutilsynet.no

Sjekkliste for universell utforming

Mange brukere er avhengig av tastatur for å kunne navigere, deriblant brukere med motoriske funksjonsnedsettelser og brukere med opplesende hjelpemiddel. Det er også mange brukere som foretrekker å benytte tastatur i enkelte sammenhenger, for eksempel ved utfylling av skjema.

For å teste hvordan din løsning fungerer med tastatur kan du trykke på Tab-tasten gjentatte ganger, og evaluere følgende:

  • Finnes det en snarveilenke fra starten av siden og ned til hovedinnholdet?
  • Er det tydelig fokusmarkering på alle steg?
  • Virker tab-rekkefølgen fornuftig? Vanlige feil er at fokus starter langt nede på siden, sikksakkhopping mellom kolonner ved Tab og at relaterte objekter ikke er gruppert sammen.
  • Kommer du innom alle objekter som har funksjonalitet, for eksempel lenker og skjemafelt, og skjer det du forventet når du trykker Enter?
  • Ved brukerstyrte endringer i grensesnittet, som for eksempel utvid/kollaps eller modalbokser, havner fokus direkte i første skjemafelt, alternativt at ett trykk på Tab-tasten setter fokus på første skjemafelt eller første lenke i det nye området?

Les mer i løsningsforslaget om tastaturnavigasjon.

For brukere med moderat nedsatt syn, er nettleserforstørring en enkel metode for å få større tekst på nettsiden. Dersom nettsiden er satt opp med responsivt design, vil dette slå inn også ved nettleserforstørring eller endring i vindusstørrelsen. Derfor bør det responsive oppsettet fungere best mulig gjennom hele spekteret av visningsstørrelser.

For å teste at forstørring fungerer på en god måte, kan du gjøre følgende:

  • Sett nettleseren i fullskjerm på den største skjermen du har tilgang til, deretter bruk nettleserens zoomfunksjon (Ctrl og +/- eller Cmd og +/-) stegvis til minst 200 prosent, gjerne opp til 400 prosent. Sjekk at alt innhold og funksjonalitet er tilgjengelig og forståelig.
  • Sett forstørringen til 100 prosent, og endre vindusbredden på din nettleser gradvis fra fullskjerm og ned til det smaleste du får til. Se om rekkefølge, gruppering og generell layout fungerer godt i hele spekteret.
  • På mobil eller nettbrett, sjekk at du kan forstørre også på sider med responsivt oppsett.

God kontrast mellom tekst og bakgrunn er særlig viktig for brukere med nedsatt syn, lesevansker og nedsatt kognisjon, og for alle brukere under krevende lysforhold. I tillegg er det viktig at farge ikke er den eneste måten å formidle informasjon på med tanke på nedsatt fargesyn.

  • Er lenker i løpende tekst markert med mer enn bare farge fra teksten rundt?
  • På all tekst kan du bruke pipettefunksjonen i CCA for å måle kontrasten mellom tekst og bakgrunn. Verktøyet sier fra dersom kravene ikke er tilfredsstilt. Minimumskravet er 3:1 for stor tekst og 4,5:1 for vanlig tekst.
  • Du kan gjerne også teste kontrast på ikoner, selv om disse ikke er omfattet av WCAG.

Overskrifter gjør det lettere for alle brukere å orientere seg i teksten. Korrekt koding av overskriftene er til stor hjelp for brukere med opplesingsverktøy, fordi det blir mulig å navigere mellom overskriftene på nettsiden.

Gå inn på et utvalg av sider på ditt nettsted, gjerne med ulike sidemaler, og les gjennom tekstene. Opplever du på noen punkter at det er lite fristende å lese videre, eller at du savner en form for oversikt over hva teksten inneholder? Da er det godt mulig at det bør være flere mellomtitler.

Riktig overskriftsnivå

Du kan også se om noen overskrifter hopper over nivå, for eksempel at de går direkte fra nivå 2 til 5 uten mellomliggende 3 og 4. Å hoppe over nivåer er ikke bra for søkemotoroptimalisering, og mange brukere med skjermleser kan oppleve å miste oversikten over innholdet.

Markering av lenker

Lenker må være mulig å se uavhengig av fargesyn, lysforhold og innstillinger i nettleseren. For å bekrefte at lenkene er lenker, skal det også være synlig fokus ved tastaturnavigering, og gjerne synlig effekt når musepekeren holdes over.

  • Er lenker i løpende tekst understreket eller skiller de seg fra brødteksten med mer enn farge?
  • Hvis lenkene i brødteksten er understreket, kan du teste med å slå av automatisk understreking av lenker i nettleseren. I Internet Explorer går du til til Verktøy, Alternativer for Internett, Avansert, rull så helt ned i listen og sett innstillingen Understrek koblinger til Aldri. Er lenkene fremdeles understreket?
  • Er lenker utenfor brødtekst tydelig markert gjennom design, ikonbruk eller lignende, slik at det er lett å se at lenkene er klikkbare?
  • Hvis du kan peke med musen på lenkene, skjer det endring i utseendet for å bekrefte klikkbarhet?

Lenketekst

Lenketeksten bør forteller hvor lenken leder og bør være fullt ut beskrivende. Det skal være tydelig for brukeren å se hvor han havner ved å følge lenken.

  • Hvis du ser på lenketeksten alene, skjønner du hvilken side du vil komme til med lenken?
  • Når du følger lenken, er det samsvar mellom lenketeksten og overskriften på siden du kom til?

For at brukere som ikke ser skal oppfatte motivet i bilder, og hvor lenkede bilder leder, må bildene ha en alternativ tekst.

For å sjekke alt-tekster, gjør følgende på et utvalg sider, helst med ulike sidemaler:

  1. Se gjennom alt-tekstene på alle bilder uten lenke og se om motiv blir beskrevet på en god måte.
  2. Se gjennom alt-tekstene på alle lenkede bilder og se om den er en god beskrivelse av hvor lenken leder.

Utdypende om bilder og grafikk.

Korrekt koding av skjema er særlig viktig av hensyn til brukere som ikke ser grensesnittet, og i mange tilfeller også for brukere med nedsatt motorisk presisjon eller kognitive funksjonsnedsettelser.

For å teste hvordan dine skjema er kodet, kan du gjøre følgende:

Sjekk at tekstfelt, nedtrekkslister og lignende har synlig ledetekst.

  • For skjemafelt: Klikk på ledeteksten med musen og se om det tilhørende feltet blir aktivt. Da er normalt koblingen mellom ledetekst og skjemafelt korrekt.
  • For radioknapper og avkrysningsbokser: Klikk på ledeteksten med musen og se om du krysser av i radioknappen eller avkryssingsboksen. Da er normalt koblingen mellom ledetekst og skjemaelement korrekt.

Utdypende om skjema.

For mange er søkefunksjonen det mest brukte alternativet for å finne fram til ønsket informasjon. Derfor er det viktig at søket fungerer på en god måte.

I søkestatistikken kan du finne ut hva brukerne søker etter. Dette kan du bruke som grunnlag for testing:

  • Test de vanligste søkefrasene og se om resultatvisningen viser det brukeren burde få presentert.
  • Se gjennom søkestatistikken, og se om det finnes noen trender, for eksempel samme type informasjon som blir søkt etter på forskjellig måte. Gir slike søk gode treff?
  • Søk på ord som du vet det finnes dedikerte sider for på ditt nettsted. Kommer hovedsiden for dette ordet øverst i resultatvisningen?
  • Søk på kombinasjoner av ord. Gir det færre og mer presise treff, eller flere og mindre presise treff?
  • Er det mulig å filtrere resultatene på noe vis?
  • Gir søkefunksjonen hjelp ved feilstaving av søkeord?

Sidetittel presenteres øverst i vinduet eller i fanen i nettleseren og hjelper brukeren med å finne riktig nettleserfane. Sidetittel er også navneforslaget ved lagring av bokmerke eller favoritt i nettleseren.

  • Åpne et utvalg sider, helst med ulike sidemaler, og se om nettleserfanen starter med en beskrivelse av sidens spesifikke innhold, og gjerne at den slutter med navnet på ditt nettsted eller virksomhet.

Korrekt kode er viktig for å sikre at nettsiden fungerer riktig med ulike nettlesere og hjelpemidler. Det er enkelte kodefeil som er mer kritiske enn andre. Når nettsiden har få kodefeil, er det lettere å oppdage de alvorlige feilene.

For å sjekke koden på nettsidene kan du bruke W3Cs kodevalidator (engelsk). Du bør sjekke alle sidemalene på ditt nettsted. Målsetningen bør være feilfri kode, men du må se spesielt etter disse feilene:

  • At alle elementer er nøstet korrekt.
  • At alle elementer startes og avsluttes korrekt.
  • At ingen elementer har duplikate attributt.
  • At ingen elementer har identisk verdi på id-attributtet.

Utdypende om kodestandarder og validering.

Fremtidige regelverk og krav

Fremtidige regelverk og krav

Norge er videre i prosess med å innlemme EUs tilgjengelighetsdirektiv (EAA) i nasjonalt regelverk. Regelverket skal tre i kraft i juni 2025.

Kilde: uutilsynet.no

Kilder og illustrasjoner:
 uutilsynet.no