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.
WCAG sjekkliste for universell utforming
Her er de punktene dere må ta en sjekk på. Denne kan du gjerne printe ut.
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.