Din guide til universell utforming –slik jobber du deg gjennom WCAG-kravene

Den såkalte WCAG-standarden inneholderetlass med krav og anbefalinger som kort sagt gjør nettstedet ditt bedre. Følg så mange som mulig av tipsene, og minimum 35. Her er vår guide til universell utformingfor nettsteder, tilpasset til WCAG2.0/2.1.

Hvis det hadde vært helt fri flyt på nettet hadde vi nok sett langt flere nettsteder som både er usikre og vanskelige å bruke. Derfor har vi en standard. Den kalles for WCAG, er internasjonal, og gir oss retningslinjer som blant annet passer på at vi leverer tilstrekkelig godservice til kunder og besøkende.

Det er ingen grunn til å ta lett på universell utforming: Hvis du blir undersøkt og funnet for lett, kan du i verste fall få bøter som svir kraftig.Dessuten er det rett og slett lite omtenksomt overfor brukerne dine å tilby et nettsted som er dårlig tilrettelagt. Som Steve Jobs skal ha uttalt: “Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.”

Hva er WCAG og universell utforming?

Du har sikkert hørt at «den gjennomsnittlige brukeren finnes ikke». Det er sjelden så relevant som i denne sammenhengen.

WCAG står for Web Content Accessibility Guidelines, eller på norsk: retningslinjer for tilgjengelighetpå nettsider. Formålet er et internett som er tilgjengelig for alle mennesker, uavhengig av funksjonsevne. De opprinnelige retningslinjene er fra 1995. I 2008 fikk vi en oppdatert versjon med tilnavnet 2.0, og i 2020 kom en utvidelse av denne, kalt WCAG 2.1, som trer i kraft ved innføring av EUs webdirektiv om universell utforming av offentligenettsteder og mobilapplikasjoner (WAD).

Universell utforming på sin side, er et langt videre begrep som brukes i mange fagfelter–men blant annet om nettsteder. Fellesnevneren er prinsippet om inkluderende design og tilgjengelighet for alle. Kravet om at alle IKT-løsninger skal være universelt utformet trådte i kraft i 2013.

De sju prinsippene for universell utforming

Før i tiden var universell utforming et begrep hovedsakelig brukt av arkitekter og byplanleggere, og det handlet om tilgjengelighet i bygninger og uteområder –hvor man for eksempel jobbet med å finne løsninger for tilkomst til offentlige bygg og byrom med rullestol, eller trygg kryssing av gater for synshemmede.

I 1997 utformetCentre of Universal Design ved North Carolina State Universitysju prinsipper for universell utforming. I dag har flere bransjer trykket prinsippene til sitt bryst, og de gir fullgod mening for alle som bygger og drifter nettsteder.

Ta dem gjerne med deg som retningslinjer i arbeidet med å WCAG-sikre nettsidene i din egen organisasjon.

Her er de sju prinsippene for universell utforming

  • Like muligheter for bruk: Utformingen skal være tilgjengelig og fungerende for personer med forskjellige ferdigheter/ferdighetsnivåer.
  • Fleksibel i bruk: Utformingen skal tjene en rekke individuelle preferanser og være tilpasset et spekter av ferdigheter.
  • Enkel og intuitiv i bruk: Utformingen skal kunne forstås lett, for brukere med forskjellig erfaring, kunnskap, språkferdigheter og konsentrasjonsnivå.
  • Forståelig informasjon: Utformingen skal gi nødvendig informasjon til brukeren på en effektiv måte, uavhengig av brukerens sensoriske ferdigheter og omgivelsene.
  • Toleranse for feil: Utformingen skal minimere sjansen for skader, uheldige konsekvenser, utilsiktede negative handlinger og lignende farer.
  • Lav fysisk utfordring: Utformingen skal kunne brukes effektivt og bekvemt med et minimum av besvær.
  • Størrelse/plass for tilgang og bruk: Tilgangen, rekkevidden, betjeningen og bruken skal muliggjøres uavhengig av brukerens kroppsstørrelse, kroppsstilling og mobilitet.

Slik har vi bygget opp vår WCAG-guide

For å hjelpe deg å navigere i dette litt kompliserte landskapet har vi satt opp en guide til deg.

Vi kan dele inn arbeidet med universell utforming av nettsted i fire hovedkategorier: Utforming og presentasjon, bilde og lyd, navigasjon, og skjemaer. Hver av disse har fått sin egen mellomtittel nedenfor, hvor vi setter deg inn i noen av de viktigste elementene for beste praksis.

Nederst i denne saken gjengir vi deretter de viktigste WCAG-kravene. Det er disse punktene du må oppfylle, mens de øvrige er mer valgfrie. Ta en sjekk, og rett opp der det trengs for at ditt nettsted skal være godt innenfor kravene til universell utforming. Dette er helt klart verdt den tiden det tar!

Du vil finne inngående informasjon og detaljer i Difis oversikt, som vi anbefaler at du tar en titt på. Du kan også ta kontakt med oss for å få hjelp til universell utforming.

Utforming og presentasjon

Når det gjelder utforming og presentasjon er det viktig å tenke på at det du publiserer på nettet skal være tilgjengelig også for dem med nedsatt synsevne. Fargebruk og kontraster mellom tekst og bakgrunn er et svært viktig element.

Det skal være lett å finne viktige elementer og objekter på siden. Lenker i teksten skal skille seg tydelig fra resten av teksten, og det skal være lett å forstå hva du lenker til og hvorfor.

Hvis du tilbyr dokumenter for nedlasting skal også disse ha en korrekt utforming, med eksempelvis riktig formatering, titler og tabellstruktur slik at de kan leses av alle.

Bilde og lyd

Bilder og lyd er nyttig, men du må også ha innhold egnet for dem med nedsatt synsevne eller hørsel. For eksempel løses dette ved teksting av videoer, synstolkning av videoer og tekstbeskrivelser av lydklipp.

Navigasjon

Det skal være enkelt å skjønne hvor markøren eller fokuset er på siden, uavhengig av om man bruker touchpad, tastatur eller mus. Det skal også være lett å finne klikkeflaten på en lenke, og å forstå hvordan man navigerer rundt på nettstedet. Du skal ha en struktur som er meningsfylt og logisk. Husk at nettstedet skal være funksjonelt uansett skjem – også for mobil.

Skjemaer

Skjemaer er noe som møter oss hele tiden, for eksempel når vi skal bestille noe, registrere oss eller dele informasjon. Det er viktig at skjemaene er lette å bruke, og at det er mulig å angre eller gå tilbake – spesielt i tilfeller hvor inndata kan ha juridisk eller økonomisk betydning.

Det vil alltid være en risiko for feil, og da må nettstedet kunne gi ryddig informasjon om hvor feilen ligger og hva brukeren kan gjøre.

Her er sjekklisten over de viktigste punktene til universell utforming (WCAG) som dere må ha på plass.

En anbefaling i oppstarten: Les gjennom hele listen og sjekk detaljene hos for eksempel Difi der du er usikker på reglene. Se hva du har å jobbe med, få en oversikt over hvordan situasjonen er på nettsidene deres i dag. Ta også en vurdering på hvem som kan gjøre arbeidet med å heve standarden: Trenger du noen som kan kode, trenger du noen med designkompetanse? Lag en plan for å komme raskest mulig innenfor godkjent nivå, dersom dere ikke allerede er der.

NB: Ved en overgang til WCAG 2.1 vil det komme flere bestemmelser i tillegg til de eksisterende. De nye punktene vil omhandle blant annet bruken av touchskjermer, visningsretning på mobil, tekstavstand, bevegelsesaktivering og pekerbevegelser. For oppdatert informasjon kan vi anbefale Difis nettsider om utvidelsen fra WCAG 2.0 til WCAG 2.1.

WCAG sjekkliste for universell utforming

Her er de punktene dere må ta en sjekk på. Denne kan du gjerne printe ut.

Share on print
Print

Ikke-tekstlig innhold

Ikke-tekstlig innhold som for eksempel bilder, skal ha en alternativ tekst. Det finnes flere unntak fra denne regelen, men selv da skal du passe på å gjøre ting riktig. Rent dekorative elementer skal for eksempel brukes på en slik måte at teknologien kan velge å ignorere dem.

Bare lyd og bare video

Forhåndsinnspilte lyder og videoer som du legger ut på nettsidene dine skal ikke være eneste kilde til informasjon. Gi brukeren et alternativ. Det kan for eksempel være at du har et sammendrag av innholdet i videoen som tekst under videoen.

Teksting

Tilby teksting for video med lyd. Du skal tilby teksting på for eksempel videoer hvor mennesker prater, slik at alle brukere kan oppfatte hva som blir sagt.

Informasjon og relasjoner

Skjemaer, presentasjoner, tabeller og lignende skal være kodet som det ser ut som.

Meningsfylt rekkefølge

Innholdet ditt skal presenteres slik at det er lett å følge en naturlig leserekkefølge og å navigere på en meningsfylt måte.

Sensoriske egenskaper

Når du gir instruksjoner til brukeren må dette gjøres på en måte som ikke kun baserer seg på sensorisk informasjon (eksempelvis lyder og former).

Bruk av farge

Presentasjoner og elementer hvor du ber brukeren om å gjøre noe, kan ikke bygges ene og alene på farger og/eller fargekontraster.

Styring av lyd

Brukeren skal kunne stoppe musikk og andre lyder som begynner automatisk når man kommer inn på siden. Man skal også kunne sette lydavspillingen på pause.

Kontrast

Kontrasten mellom tekst og bakgrunn skal være minimum 4,5:1, bortsett fra i noen særtilfeller som gjelder logo, dekor og store skrifttyper (her gjelder egne bestemmelser).

Endring av tekststørrelse

Tekstene skal kunne forstørres til 200 % uten at lesbarheten blir dårligere.

Bilder av tekst

Man skal bruke tekst fremfor bilder av tekst i formidlingen av informasjon. Unntaket er hvis bildet av teksten kan tilpasses visuelt til brukerens krav. Logoer med tekst i bilde gjelder også som unntak fra regelen.

Tastatur

Brukeren skal kunne navigere rundt på nettstedet kun ved bruk av tastaturet, uten å miste funksjonalitet.

Ingen tastaturfelle

Kort fortalt skal du unngå tastaturfeller, og gjøre det mulig å flytte fokus (markøren) rundt på siden kun med piler og tabulatortaster eller lignende. Hvis det ikke er mulig må du oppgi alternative metoder.

Justerbar hastighet

Som hovedregel skal brukeren kunne justere hastighet og tidsbegrensninger, og forlenge tiden for å gjennomføre handlinger på nettstedet. Det finnes unntak, for eksempel for auksjoner og lignende hvor tidsfaktoren er helt essensiell for konseptet.

Pause, stopp, skjul

Du skal gi brukeren muligheten til å stoppe, pause eller skjule bevegelser, blinking, rulling og lignende bevegelser som starter opp automatisk.

Terskelverdi på maksimalt tre glimt

Innhold kan kun blinke maksimalt 3 ganger i sekundet.

Hoppe over blokker

Du skal ha en funksjon som gjør det mulig å omgå blokker og hoppe rett til hovedinnholdet.

Sidetitler

Titlene på nettsidene dine skal være beskrivende og tydelige slik at brukeren raskt forstår sidens tema eller formål.

Fokusrekkefølge

Du skal presentere innholdet ditt i en logisk rekkefølge, særlig når rekkefølgen brukeren gjør ting i påvirker betydningen eller leveransen fra siden.

Formål med lenke

Når du lenker til noe, skal det fremkomme tydelig hva du lenker til og hvorfor du gjør det.

Flere måter

Tilby brukeren flere måter å navigere på nettsidene, såfremt nettstedet ikke er lagt opp som en fast prosess som kun kan gjennomføres på én måte.

Overskrifter og ledetekster

Både overskrifter og ledetekster skal være beskrivende, slik at emne og/eller formål er klart og tydelig.

Synlig fokus

Når en bruker navigerer med tastatur på en av dine nettsider skal det alltid være synlig fokus: Man skal kunne se markøren, eller se hvor man er på siden.

Språk på siden

Språket til innholdet på nettsidene dine skal angis i koden.

Språk på deler av innhold

Hvis du har innhold på nettsidene som er på et annet språk enn nettstedet for øvrig, skal dette markeres i koden.

Fokus

Når en komponent kommer i fokus, skal det ikke gi automatiske kontekstendringer eller forandringer i siden.

Inndata

Hvis brukeren endrer verdiene i et skjemafelt skal det ikke automatisk føre til vesentlige endringer i siden.

Konsekvent navigering

Hvis du har flere nettsider med lignende navigeringsmekanismer, skal de ha en gjenkjennelig, konsekvent rekkefølge.

Konsekvent identifikasjon

Elementer med samme funksjonalitet på tvers av flere sider skal utformes på samme måte, slik at de er gjenkjennelige.

Identifikasjon av feil

Når det oppstår en feil som oppdages automatisk, skal nettsiden kunne vise hvor feilen har skjedd og beskrive feilen med tekst.

Ledetekster eller instruksjoner

I skjemaer som skal fylles ut av brukeren, skal det være instruksjoner eller ledetekster som forklarer hvilken informasjon brukeren skal gi.

Forslag ved feil

Hvis det blir oppdaget en feil automatisk, skal brukeren få presentert et forslag til hvordan feilen kan rettes – så lenge det ikke gir risiko for sikkerheten eller formålet med innholdet.

Forhindring av feil

For sider hvor brukerens aktivitet kan gi juridiske forpliktelser, skal det gå an å angre, kontrollere eller bekrefte dataene som sendes inn, slik at datafeil, økonomiske eller juridiske feil kan unngås.

Parsing

Unngå større kodefeil på alle nettsider. Pass på at kodene er fullstendige, at du ikke har duplikater og at ID-ene er unike.

Navn, rolle, verdi

Alle komponenter som dere lager selv, eksempelvis skjemaelementer og lenker, skal ha navn og rolle bestemt i koden. For ferdige løsninger og standardelementer er dette allerede ivaretatt.

Vi vil gjerne høre om din idé. Fyll inn informasjonen din, så hører du fra oss!

Har du et prosjekt i tankene eller et spørsmål? Vi svarer deg så fort som mulig.

Lignende innlegg

Starte egen nettbutikk

Starte egen nettbutikk i 2020

Produktet Du har kanskje allerede et produkt, og ønsker rett og slett å få solgt dette på enklest og raskest mulig vis. Det kan også

Jeg vil vite mer!

Vil du ha et kostnadsfritt forslag på hvordan du kan øke salget ditt på nett?

  • Vi svarer innen 24 timer
Vi behandler dine kontaktopplysninger i henhold til personvernet