Slik tester du om kravene for universell utforming er oppfylt

Universiell utforming (uu) handler om tilrettelegging av samfunnet, uavhengig av hvem du er og hvilke utfordringer du har eller ikke har. Dette gjelder i stor grad også de digitale løsningene. I denne artikkelen skal vi gå gjennom noen av de vanligste fallgruvene for nettsider og gi deg tips til hva du må tenke over som designer for å oppnå kravet om universell utforming. 

Ulike verktøy og hjelpemidler til testing av digitale løsninger

Det finnes mange ulike verktøy man kan ta i bruk for å sjekke at alle uu-krav er imøtegått. Noen kan man laste ned som egne programmer, andre som tilleggspakker i nettleseren. Det kan også være lurt å teste nettsider med de samme hjelpemidlene som brukere med ulike utfordringer tar i bruk. Klarer du for eksempel å navigere deg gjennom nettsiden uten skjerm eller mus? Hva skjer hvis du zoomer inn til 200% på nettsiden? Er designet responsivt? Vil du fortsatt kunne navigere deg rundt på nettsiden samtidig som du får med deg innholdet? 

Disse verktøyene og hjelpemidlene anbefaler vi å bruke:

Truls er interaksjonsdesigner hos oss og har testet flere ulike sider hos én av våre kunder. Han har tatt utgangspunkt i uu-tilsynet sine egne testprosedyrer for nettsider. Dette er noen av feilene han oftest har oppdaget: 

Ikke tekstlig innhold

Bilder, video og andre elementer må være kodet på en slik måte at brukerne får en beskrivelse av bildets innhold, eller hva man ønsker å formidle med elementet selv om de ikke har mulighet til å se den. Den typiske løsningen på dette vil være å legge inn alt-tekster. Kort fortalt går det ut på å gi brukeren et godt tekstalternativ for innhold som ikke er tekst. 

Truls erfarte at de fleste sidene hadde gode alt-tekster på landingssiden, men etterhvert som man kom dypere inn i siden ble det bare dårligere og dårligere. Flere steder fantes det en alt-tekst, men denne innehold for eksempel fil-navnet og ikke en beskrivende tekst for bildet. Det kan da bli forvirrende for brukere som får opplest et filnavn, og ikke en beskrivelse av bildet. 

Kontrastkrav ikke oppfylt

Det er viktig å ha god nok kontrast mellom tekst og bakgrunn. Det skal være enkelt å lese og tyde hva som står på en nettside, også for dem som har problemer med synet. Kravet til kontrast er per nå avgrenset til tekst som formidler informasjon. Det gjelder da for eksempel ikke for grafiske elementer. Det finnes ulike nivåer av kontrastkrav til tekst. I tillegg er det ulike krav til feks stor og liten tekst, all informasjon om kontrastkrav kan du finne her. 

Navigering med tastaur

For å kunne forstå hvor på siden man befinner seg, er det viktig med synlig fokusmarkering. Dette er en markering som kommer frem hvis man for eksempel bruker tastaturet til å navigere seg på en nettside. Fokusmarkering kan gjøres på forskjellige måter, det kan være ramme, understrek, bakgrunnsfarge, tekstmarkør i skjema-felt eller annen form for visuell forandring. Som man ser av eksempelet under, er det til venstre ikke en tilstrekkelig fokusmarkering. Mens til høyre er dette markert med en ramme. 

En annen viktig del av å bruke tastaturet til navigering, er muligheten for å kunne hoppe over blokker i menyer. Dette er for å slippe å gå gjennom alle menypunkter på alle sider, men ha muligheten til å direkte til hovedinnholdet. 

Manglende informasjon i skjemafelt

Det er viktig å gi brukerne veiledning på hvordan de skal bruke et skjema, dette kan man løse ved å bruke ledetekster eller instruksjoner. Det har blitt en standard at dette markeres med en stjerne, men å kun bruke det er ikke godt nok. Er det noen felter som er obligatoriske må det forklares innledningsvis. Dette vil gi brukeren tilstrekkelig informasjon før hun eller han trykker seg gjennom skjemaet.

Farge skal ikke være eneste virkemiddel for å formidle et budskap

Det vil si at hvis det oppdages en feil i et skjema skal ikke dette bare markeres med rødt, for dette er informasjon som kan gå tapt for de uten syn eller de som trykker seg gjennom en nettside. Det er også viktig å si noe om hvorfor det har blitt en feil. I dette eksempelet har det blitt oppdaget en feil automatisk i skjemaet. Men det er ingen indikasjon på hva som er feilen, annet enn at det har blitt markert i rødt. Her burde det blitt opplyst at det ikke er mulig å skrive inn tall i disse feltene. For som vi ser er navnet blitt skrevet med tallet 0 i stedet for bokstaven O. 

Et lærerikt prosjekt

Dette er viktige erfaringer å ta med seg videre, og at det er mange hensyn som skal tas i designfasen. Her er Truls sine beste tips før man skal gå i gang å teste nettsider.

1. Sett opp en liste over hvilke sider på nettsiden som skal testes. Ofte er det mange sider som er basert på samme mal, og da er det unødvendig å teste de samme sidene. Et annet punkt som er lurt å huske på, er å teste nettsider som har mye innhold og forskjellige elementer. 

2. Test samme side med ulike verktøy. Noen verktøy går mer i dybden inn på enkelte elementer og to ulike verktøy kan gi ulik informasjon om samme tema. 

3. Ta skjermbilder underveis og noter deg hvor du oppdager feil. På den måten blir det lettere å finne tilbake til hvor du skal gjøre endringer senere. Du kan også bruke dette til å prioritere hvilke feil som skal rettes opp i først.

4. Sjekk HTML-validering ved hjelp av for eksempel dette verktøyet. Dette kan være ganske teknisk, uu bygger også mye på koding og at det er kodet riktig. Hvis det er forskjellige feilmeldinger man ikke forstår, kan det være fint å ta kontakt med en frontendutvikler eller en annen med teknisk bakgrunn.

Er du redaktør eller ansvarlig for en nettside? Da kan du lese vårt søsterselskap Epinova sin artikkel med egne uu-tips for akkurat deg.

Truls Uddal

Interaksjonsdesigner

truls.uddal@nbeat.no

+47 97602873