Type prosjekt
Semesteroppgave
Gruppeprosjekt
Oppdragsgiver
Dekode Interaktiv
Verktøy
WAVE Evaluation Tool
WebAIM
Miro
Les mer om samarbeidet
Introduksjon
Oversikt
Dette var et samarbeidsprosjekt med det digitale designbyrået Dekode, der gruppen min evaluerte tilgjengeligheten til SOS-Barnebyer sin nettside (som Dekode står bak) med utgangspunkt i WCAG 2.2 retningslinjene for universell utforming (UU) og nasjonalt regelverk. Målet var å identifisere barrierer som gjør nettsiden vanskelig å bruke for personer med ulike funksjonsnedsettelser, og foreslå forbedringer som kan gjøre opplevelsen mer inkluderende for alle brukere.
Bakgrunn for prosjektet
Dette prosjektet var en del av et samarbeid mellom NTNU og det digitale designbyrået Dekode, som jobber med digitale løsninger for organisasjoner og offentlige aktører. Målet med samarbeide var både å gi oss studenter erfaring fra reelle prosjekter, samtidig som Dekode fikk styrket sin UU kompetanse gjennom vår kunnskap og anbefalinger knyttet til inkluderende og tilgjengelig webdesign.
Dagens utfordring
Inkluderende og tilgjengelig webdesign bidrar til å sikrer at alle, uavhengig av funksjonsevne, alder, språk og/eller tekniske ferdigheter, kan få tilgang til og bruke digitalt innhold likt. I Norge er universell utforming regulert gjennom forskrift om universell utforming av IKT-løsninger, og nettsider forventes å følge WCAG (Web Content Accessibility Guidelines) som standard for tilgjengelighet. Til tross for dette er det fortsatt mange nettsider som ennå ikke oppfyller alle minimumskravene.
Identifisering av brudd på WCAG 2.2
For å identifisere brudd på nasjonalt regelverk og WCAG 2.2 benyttet vi oss av flere metoder inkludert, verktøy-basert evaluering, manuell evaluering og brukertester. Vi evaluerte ikke hele nettsiden, men fokuserte på totalt 6 sentrale sider med variert type innhold.
Verktøy-basert og manuell evaluering
Verktøy-basert evaluering:
For å identifisere problemer knyttet til blant annet lav fargekontrast, manglende alt-tekst, og feil i HTML-strukturen, benyttet vi oss av "WAVE Evaluation Tool".
Manuell evaluering:
Ettersom ikke alle feil kan oppdages gjennom automatiske verktøy som "WAVE", gjennomførte vi i tillegg en manuell evaluering ved hjelp av tastaturnavigasjon og skjermlesere.
Brukertester
I tillegg gjennomførte vi brukertester med tre deltakere, alle med hver sin kognitive utfordring i form av ADHD, Dysleksi og Autisme. Deltakerne skulle fullføre tre ulike oppgaver på nettsiden:
Doner som privatperson.
Du ønsker å skrive en forespørsel til SOS Barnebyer, hvordan går du frem for å fullføre dette?
Finn artikkelen «Ukraina: Ferielei gir barn et pusterom fra krigen»
Resultatene fra WAVE testen på tvers av de seks sidene.
Resultat
Hvor tilgjengelig er nettsiden?
Overordnet viste testene at nettsiden i stor grad oppfyller mange WCAG 2.2 krav, samtidig avdekket vi flere brudd ved nettsidens tilgjengelighet som fort kan bli oversett; men som har stor betydning for hvordan enkelte brukergrupper opplever og navigerer nettsiden.
Verktøy-basert eveluering
Fargekontrast: et gjennomgående problem
Lav fargekontrast var det mest utbredte problemet på tvers av nettsiden, flere av tekstelementene oppfylte ikke minimumskravet for kontrast (WCAG 1.4.3). Eksempelvis var kontrasten i footeren svært dårlig. Andre fremtredende utfordringer var forekomsten av tomme lenker, feil bruk av lables i skjemaer og et ustrukturert overskriftshierarki. Dette kan gjøre det vanskelig å navigere siden med skjermleser.
Skjermbilde av WAVE verktøyet i praksis.
Footeren som har dårlig fargekontrast mellom tekst og bakgrunn.
Manuell eveluering
Utydelig fokusindikator og inkonsekvent struktur
Under den manuelle evalueringen så man at fokusindikatoren var tiltider svært utydelige, spesielt over bilder, noe som gjorde det vanskelig å følge navigasjonen med tastatur. I tillegg avdekket vi en inkonsekvent navigasjonsstruktur, hvilket resulterte i at enkelte elementer oppførte seg annerledes enn forventet. Videre manglet videoinnhold beskrivelser av hva som vises, noe som reduserer tilgjengeligheten for synshemmede.
Eksempel på dårlig fokusindikator over bilde.
Eksempel på dårlig fokusindikator i menyen.
Brukertester
Nettsiden oppleves i stor grad brukervennlig blant individene vi testet
Alle de tre deltakerene vi testet på meddelte at de stort sett ikke hadde noen utfordringer knyttet til gjennomførelsen av de tre oppgavene, samtidig hadde de ulike strategier for å løse oppgavene.
Brukeren med Dysleksi brukte aktivt menyen når informasjonen ikke var til å finne på forsiden, i tillegg foretrakk brukeren telefon fremfor e-post når det gjaldt oppgave 2. Brukeren med ADHD brukte derimot footeren i stor grad, og skannet innhold raskt. Til oppgave 1 bemerket brukeren med ADHD at enkelte elementer ikke opplevdes tilfredstillende knyttet til skjemaet. Brukeren med Autisme fulgte oppgavene i stor grad strukturert, og utforsket sidene systematisk når enkelte ting ikke opplevdes intuitivt.
Nøkkel observasjoner på tvers av brukerene.
Forslag til forbedringer på tvers av nettsiden
Et viktig grep vil være å endre fargen på tekst slik at alt møter WCAG-krav (minimum 4.5:1). Det vil også være hensiktsmessig å justere fargen på fokusindikatoren slik at den blir mer synlig over grafisk innhold. Når det gjelder utfordringer knyttet til sematikk og struktur, vil det være viktig at man fjerner tomme lenker og legger til tydelige labels på alle inputfelt, samt strukturerer innholdet med riktig hierarki (H1, H2, H3).
Avslutning
Refleksjoner
Nettsiden er generelt tilgjengelig for brukere med auditive og kognitive utfordringer. Brukerne som testet nettsiden, gjennomførte oppgavene i stor grad uten problem. De største utfordringene knytter seg imidlertid til synshemninger, særlig når det gjalt bruk av farger (kontrast) og såkalte “keyboard traps” som oppstår ved navigasjon med skjermleser. Selv om nettsiden i stor grad er tilgjengelig, viser manglende oppfyllelse av enkelte WCAG 2.2-krav at det fortsatt er rom for forbedringer.
Samlet effekt av anbefalte tiltak
Tiltakene vil bidra til å gjøre nettsiden mer tilgjengelig og brukervennlig for et bredere spekter av brukere. Ved å forbedre kontrast, struktur og semantikk, samt støtte for hjelpemidler som skjermleser og tastaturnavigasjon, reduseres barrierer for brukere med ulike funksjonsnedsettelser. Samtidig vil en tydeligere og mer konsistent løsning også gi en bedre opplevelse for alle brukere.
Læringsutbytte
Dette prosjektet har gitt meg en dypere forståelse for hva tilgjengelighet faktisk innebærer i praksis og hvor viktig det er å kombinere flere metoder for å avdekke ulike typer utfordringer. Prosjektet styrket i tillegg min kompetanse knyttet til det å både gjennomføre og analysere brukertester for å innhente relevant innsikt knyttet til en konkret utfordring.
