God tilgjengelighet er god butikk

Kode på en skjerm

Driver du nettside har du hørt forkortelsen WCAG. Hva tenker du om de bokstavene egentlig? Irriterende pisk? Inspirerende gulrot? Retningslinjene for tilgjengelighet er i stadig endring, og med nye versjoner følger både pisker og gulrøtter for å sikre at de fleste nettsider i verden skal bli enkle å bruke for alle - uansett funksjonsevne.

Det finnes mange gode grunner til å etterleve WCAG-reglene, men sannheten er at når en nettside skal lages eller oppdateres faller tilgjengelighet raskt bort når budsjettet nærmer seg rødt og lanseringsdatoen står og lurer rundt hjørnet på neste kvartal. Det er stort sett bare offentlige nettsteder som blir gode nok til slutt, fordi de må oppfylle visse krav for å godkjennes.

Men her er enda noen grunner, akkurat i tide til offentliggjøringen av WCAG 2.1 i morgen:

 

Antallet potensielle kunder vi snakker om er med andre ord veldig stor. De abonnerer på strømmetjenester og digitale tidsskrifter, kjøper produkter i nettbutikker, tar nettbaserte utdanninger og donerer til veldedighet via elektroniske skjemaer. Å ikke ta disse behovene på alvor når man utvikler en nettside er en stor feil. Både etisk og økonomisk.

Hva er WCAG?

WCAG står for Web Content Accessibility Guidelines. Retningslinjene deles opp i 4 hovedområder og kan huskes ved å bruke akronymet POUR.

  • Perceivable - Innhold må kunne oppfattes av flere enn en sans
  • Operable - Man må kunne navigere på flere måter
  • Understandable - nettsiden må være forståelig og forutsigbar
  • Robust - Siden må kunne takle oppdateringer i programvare og fortsatt være tilgjengelig.

En full oversikt kan du for eksempel finne her, men du ser sikkert poenget: Denne listen er ikke bare bra for mennesker med funksjonsnedsettelser - det er bra for alle.

Hva er nytt i WCAG 2.1?

Ettersom teknologi utvikler seg og nye måter å bruke internett på blir mer utbredt, vil krav om tilgjengelighet endres og/eller legges til. Sånn sett er WCAG 2.1 bare en naturlig videreføring av 2.0, hvor noen ting har blitt lagt til. Generelt dreier det seg mye om krav som støtter bruk at nettbrett og skjermleser, med enkelte tilleggselementer. 

Den største endringen for norske nettsteder er imidlertid tilgjengelighetserklæringen  som nå er påkrevet for offentlige nettsteder. 

Hvordan sjekker jeg om nettsiden min er tilgjengelig for alle?

Bortsett fra å la en designer med kompetanse på området gjøre en grundig sjekk, finnes det noen enkle ting du kan gjøre selv for å teste om nettsiden din er tilgjengelig. Du vil ikke kunne fange opp absolutt alt, for eksempel hvis du ikke har tilgang på en skjermleser, men du vil få en god ide om omtrent hvor du står.

Finner du ut at det er dårlig stilt med nettsiden din, kan vi gjerne snakke om hvilke krav du kan og bør møte, og hvordan du enklest mulig kan møte dem. Bare send oss en forespørsel på kontaktsiden vår, så kommer vi raskt tilbake til deg.

New call-to-action

Skru av mus og trackpad

Oppgaven er enkel: Prøv å navigere deg rundt på siden din med kun tastaturet. 

Tastatur 1

‘Tab’-knappen lar deg velge elementer på siden. 

 

Tastatur 2

‘Shift+Tab’ lar deg velge forrige element

 

Tastatur 3’Enter’ lar deg velge (klikke på) elementet for å for eksempel åpne en lenke.

Sjekk spesielt skjemaer, videospillere o.l. Velges elementene i samme rekkefølge som de vises visuelt? Finnes det noen elementer som ikke lar seg navigere til? Kan du hele tiden se hvor du befinner deg? Hvis du svarer nei på noen av disse spørsmålene, må du ta grep.

Deaktiver CSS

CSS er en fil som beskriver hvordan HTML skal se ut, altså det som nettsider er bygget opp av. HTML kan for eksempel siat det skal ligge en knapp på siden, og si noe om hvor denne er plassert i forhold til de andre elementene, mens CSS sier at knappen er blå, har runde kanter, osv. 

Grunnen til at vi skrur av CSS er at mange med synshemninger har egne CSS-filer som gjør det enklere for dem å identifisere klikkbare elementer. Hvis nettsiden din for eksempel bruker et bakgrunnsbilde som innhold, vil dette forsvinne når vi skrur av CSS, og innholdet blir umulig å finne for disse brukerne.

Husk at synshemninger er mer enn å være blind! En ting er å tilpasse nettsiden for skjermlesere, men ikke alle synshemmede bruker en sånn.

Jeg bruker Chrome som eksempel, men du kan sjekke denne artikkelen for instrukser for noen av de mest vanlige nettleserne.

Den enkleste måten er å legge til en utvidelse som heter Web Developer. Åpne den ved å velge den i menylinjen øverst til høyre i nettleseren. Det kan hende du må trykke på puslespillbrikken for å få opp alle utvidelsene dine.

Velg deretter ‘CSS’ og ‘disable all styles’

Skru av alle css stiler

Still deretter disse spørsmålene:

  • Forsvant noen viktige elementer, lenker, eller innhold?
  • Er innholdet vanskelig å forstå?

Hvis svaret på noen av disse er ja, fungerer ikke siden din godt nok.

Sjekk om media er tekstet eller transkribert

Alle videoer og lydfiler bør være tekstet, eventuelt bør innholdet være mulig å få tak i som ren tekst. Spilleren selv bør også være tilgjengelig og navigerbar slik at brukeren kan velge å skru av og på tekst. Benytt gjerne den innebyggede tekst-funksjonen i YouTube

Sjekk felter hvor brukeren kan legge inn informasjon

Jeg nevnte skjemaer tidligere, og de er vanligvis de største synderne her. Har skjemaet ditt for eksempel et felt som ser slik ut?


felt

Teksten ‘Your full name’ kalles en ‘label’, eller merkelapp. Den skal være mulig å velge med tastaturet. Når man trykker ‘Enter’ skal pekeren automatisk hoppe inn i feltet slik at man kan skrive i det.

Det finnes andre ting som bør sjekkes, men denne testen tar seg av den feilen de fleste gjør: å ikke ha merkelapper man kan navigere til. Uten å kunne skrive i et felt kan brukeren heller ikke donere til ditt veldedige formål!

Test høykontrastmodus

Mange synshemmede bruker denne modusen. For å skru den på i iOS, gå til eplemenyen og velg ‘Systemvalg’. Velg deretter ‘Tilgjengelighet’ og ‘Skjerm’. Klikk på ‘øk kontrast’, og du vil se at displayet forandrer seg. Du kan også stille inn hvor sterk denne effekten er på slideren under.

Innstillinger for tilgjengelighet

 

Test gjerne også de andre valgene her for å se hvordan nettsiden din reagerer.

Fjern bilder

Denne ligner på punktet om å fjerne CSS. Bilder kan egentlig være en god ting for å gjøre siden enklere å forstå, men de må ikke være påkrevet for å kunne bruke funksjoner. 

Bare åpne Web Developer igjen, velg ‘Images’ og ‘Disable Images’.

Skru av alle bilder

Still deretter spørsmålene:

  • Mangler det noe innhold?
  • Er siden vanskeligere å navigere rundt på?
  • Er siden vanskeligere å forstå?
  • Er det noe du ikke kan gjøre nå som du kunne før?

Du kan for eksempel teste denne bloggposten på den måten. Ser du hvilket element som forsvant?

Tilgjengelighet bør bygges inn i løsningen, ikke hektes på senere

Hvis du allerede har en utilgjengelig nettside, er det selvfølgelig ting vi kan gjøre for å reparere den. Men for å gi brukere den beste mulige opplevelsen på nettsiden, er det aller best å utforme den med tilgjengelighet som en viktig spesifikasjon. Du vil da få en tilgjengelig nettside i stedet for en nettside med tilgjengelighetsfunksjonalitet.

Dette er en viktig distinksjon, som de med for eksempel gammel bil vil kjenne seg igjen i. Du kan lydisolere, installere ny katalysator og bruke viftehatt mens du kjører om sommeren. 

Bilde av person

 

Men de fleste får en bedre opplevelse med en bil hvor disse tingene er integrert i selve designet.

Forfatter

Elise jobber som Senior UX-designer i Frontkom med 12+ års erfaring. Hun har tidligere jobbet som interaksjonsdesigner før hun ble fagleder for brukeropplevelse og design i Markedspartner. Elise har også en bachelorgrad i Visuell kommunikasjon fra Universitetet i Sørøst-Norge

Relaterte artikler

Få oppdateringer fra våre blogger