Legg bort musen: Test den viktigste kundereisen for universell utforming
Kategori: Universell utforming. En praktisk metode for å finne barrierer i navigasjon, kontrast, skjermleseropplevelse og skjemaer.
En nettside kan se ryddig ut og likevel være vanskelig å bruke. Problemet blir ofte tydelig først når noen navigerer uten mus, forstørrer innholdet, bruker skjermleser eller møter en feilmelding i et skjema.
En effektiv måte å finne slike barrierer på er å teste én viktig kundereise fra start til slutt. Det kan være å sende en forespørsel, bestille en tjeneste, finne kontaktinformasjon eller fullføre et kjøp. Målet er ikke bare å kontrollere enkeltsider, men å undersøke om brukeren faktisk kommer frem.
Velg én oppgave som betyr noe
Begynn med en konkret oppgave som både virksomheten og brukeren er avhengig av. En bedriftsnettside kan for eksempel testes med oppgaven: Finn riktig tjeneste, les hva den innebærer, og send inn en forespørsel.
Skriv ned startpunktet og hva som regnes som fullført. Det gjør testen mer presis og reduserer faren for at dere bare klikker tilfeldig rundt.
- Start på samme side som en vanlig besøkende sannsynligvis lander på.
- Bruk den faktiske menyen og de synlige valgene.
- Gå gjennom hele skjemaet, også validering og bekreftelse.
- Noter hvor brukeren må gjette, gå tilbake eller bytte betjeningsmåte.
Denne avgrensningen gjør universell utforming håndterbar. Dere får en reell kundereise å forbedre, ikke bare en lang liste med isolerte avvik.
Første gjennomgang: Bruk bare tastaturet
Legg bort musen og bruk Tab og Shift+Tab for å bevege deg mellom interaktive elementer. Bruk Enter eller mellomrom for å aktivere lenker og knapper. I enkelte komponenter, som radioknapper og menyer, kan piltastene også være nødvendige. Escape bør normalt kunne lukke dialogbokser og åpne lag.
Underveis skal det alltid være mulig å se hvilket element som har tastaturfokus. En svak eller manglende fokusmarkering gjør navigasjonen til gjetting. Fokuset må være synlig mot bakgrunnen og fortsatt kunne oppfattes når det ligger over bilder, fargede felt eller knapper.
Kontroller rekkefølgen
Fokusrekkefølgen bør følge den visuelle og logiske rekkefølgen på siden. Hvis tastaturet hopper fra hovedmenyen til bunnteksten og deretter tilbake til hovedinnholdet, er strukturen vanskelig å forstå.
Vær særlig oppmerksom på innhold som visuelt er flyttet med design eller oppsett. Det som ser ut til å ligge først, kan ligge langt senere i den tekniske rekkefølgen. Løsningen er vanligvis å rydde i strukturen, ikke å tvinge frem en kunstig rekkefølge.
Test åpne og lukkede tilstander
Åpne mobilmenyer, nedtrekksmenyer, filtre, informasjonsbokser og dialogvinduer med tastaturet. Sjekk at de kan lukkes igjen, og at fokuset returnerer til elementet som åpnet dem.
En dialogboks skal ikke sende tastaturbrukeren videre til innhold som ligger skjult bak boksen. Samtidig må brukeren kunne komme seg ut uten å laste siden på nytt. Slike fokusfeller er blant barrierene som kan stoppe en oppgave fullstendig.
Bruk WCAG til å forklare problemet
WCAG gir kriterier for tilgjengelig innhold, men kriteriene er mest nyttige når de kobles til det brukeren prøver å gjøre. «Fokusmarkeringen er vanskelig å se» er mer handlingsrettet enn bare å registrere et kriteriebrudd. Enda bedre er det å beskrive konsekvensen: «Brukeren ser ikke hvilken knapp som aktiveres i neste steg av skjemaet.»
Skill mellom problemer som stopper oppgaven, problemer som gjør den vesentlig vanskeligere, og mindre forbedringer. Denne prioriteringen hjelper utviklere, designere og innholdsansvarlige med å rette det viktigste først.
- Stoppende: En meny, knapp eller skjemafunksjon kan ikke brukes med tastatur.
- Alvorlig: Fokusrekkefølgen er ulogisk, feilmeldinger blir ikke formidlet eller kontrasten gjør tekst vanskelig å lese.
- Forbedring: Innholdet fungerer, men struktur, hjelpetekster eller formuleringer kan bli tydeligere.
Kontroller kontrast i reelle situasjoner
Kontrasttesting må omfatte mer enn svart brødtekst på hvit bakgrunn. Undersøk lenker, knapper, hjelpetekster, feilmeldinger, skjemafelt, ikoner og fokusmarkeringer i alle tilstander.
For vanlig tekst er det vanlige minstekravet et kontrastforhold på 4,5 til 1. Stor tekst kan ha 3 til 1. Visuelle deler av brukergrensesnittet, som kanten på et nødvendig skjemafelt eller en fokusmarkering, trenger normalt minst 3 til 1 mot fargen ved siden av.
Ikke stol på farge alene. Hvis et felt med feil bare får rød kant, kan betydningen forsvinne for brukere som ikke oppfatter fargen. Legg til et tydelig symbol eller en tekst som forklarer hva som må rettes.
Test også tilstander som ofte blir oversett: en deaktivert knapp, en besøkt lenke, tekst over bilder og knapper når pekeren holdes over dem. Det hjelper lite at standardtilstanden har god kontrast hvis teksten blir uleselig når brukeren faktisk samhandler med elementet.
Andre gjennomgang: Lytt med skjermleser
En kort skjermlesertest kan avdekke problemer som ikke er synlige. Lytt først gjennom overskriftene. De bør gi et forståelig sammendrag av siden og være ordnet i et logisk hierarki. Overskrifter skal beskrive innhold, ikke brukes bare fordi en bestemt skriftstørrelse passer designet.
Gå deretter gjennom lenker og knapper. Tekster som «Les mer», «Klikk her» og flere identiske «Velg»-knapper gir lite mening når de leses uten omgivelsene. Bruk navn som forklarer mål eller handling, for eksempel «Les om regnskapstjenesten» eller «Velg standardabonnement».
Bilder som formidler informasjon, må ha et kort og relevant tekstalternativ. Dekorative bilder bør ikke skape unødvendig opplesning. Ikonknapper trenger et tilgjengelig navn som forklarer funksjonen. Et søkeikon skal for eksempel formidles som søk, ikke som filnavnet til et bilde eller et uforståelig symbol.
Skjermlesertesten bør ikke brukes som en jakt på identisk opplesning i alle programmer. Spør heller om brukeren får riktig informasjon, i riktig rekkefølge, og kan forstå og utføre oppgaven.
Skjemaet er ofte den avgjørende testen
Et skjema samler mange krav på ett sted: tastaturnavigasjon, kontrast, forståelig språk, teknisk struktur og tydelig feilhåndtering. Det er også her en potensiell kunde kan bli stoppet rett før målet.
Gi hvert felt en synlig etikett
Feltet skal ha en etikett som forteller hva brukeren skal skrive inn. Ikke bruk plassholdertekst som eneste etikett. Den forsvinner når brukeren begynner å skrive, kan ha svak kontrast og gir dårlig støtte ved feilretting.
Forklar formatkrav før brukeren sender inn. Hvis et organisasjonsnummer, telefonnummer eller passord må følge et bestemt mønster, bør dette stå ved feltet. Marker obligatoriske felt både visuelt og teknisk, og forklar hva markeringen betyr.
Gjør feil enkle å finne og rette
Send inn skjemaet med tomme eller feil utfylte felt. Feilmeldingen bør si hvilket felt som har et problem, hva problemet er, og hvordan det kan løses. «Ugyldig verdi» er sjelden tilstrekkelig.
Feilen må være knyttet til riktig felt slik at skjermleseren formidler den. Ved flere feil kan et sammendrag øverst i skjemaet gi oversikt. Flyttes fokus til sammendraget, må brukeren kunne gå direkte videre til feltene som må rettes.
Kontroller til slutt bekreftelsen. Brukeren skal forstå om innsendingen var vellykket, hva som skjer videre, og om det forventes en handling. En grønn hake alene er ikke en tydelig bekreftelse.
Dokumenter funn som kan brukes
Et avvik blir lettere å rette når beskrivelsen inneholder mer enn «fungerer ikke». Bruk en fast og kort struktur:
- Beskriv siden og oppgaven som ble testet.
- Oppgi betjeningsmåte, for eksempel tastatur eller skjermleser.
- Forklar trinnene som utløser problemet.
- Beskriv hva som faktisk skjer.
- Beskriv hva som bør skje for at oppgaven skal fungere.
- Angi konsekvensen for brukeren og prioriteten for retting.
Et konkret funn kan være: «Når brukeren åpner kontaktskjemaet og trykker Tab fra telefonfeltet, flyttes fokuset til bunnteksten. Send-knappen kan derfor ikke nås med tastatur.» Det gir utvikleren et tydelig startpunkt og testeren et klart resultat å kontrollere etter retting.
Rett mønsteret, ikke bare enkeltsiden
Når en feil finnes i en felles komponent, bør den rettes sentralt. En svak fokusmarkering på én knapp finnes ofte på mange knapper. Det samme gjelder etiketter, feilmeldinger, dialogbokser og lenkestiler.
Legg tilgjengelige varianter inn i designsystemet eller komponentbiblioteket. Definer hvordan fokus skal se ut, hvordan feil skal presenteres, hvilke kontraster som er tillatt, og hvordan komponenter skal betjenes med tastatur. Da blir universell utforming en del av løsningen fremfor en serie lokale reparasjoner.
Avslutt med å teste den samme kundereisen på nytt. En rettelse er først ferdig når brukeren kan gjennomføre hele oppgaven uten å møte den opprinnelige barrieren eller en ny feil som rettelsen har skapt.
Å legge bort musen løser ikke hele arbeidet med universell utforming. Det er derimot en enkel måte å synliggjøre hvor design, innhold og teknisk struktur ikke henger sammen. Når testen kombineres med kontrastkontroll, skjermleser og grundig skjematesting, får virksomheten et konkret bilde av om nettsiden faktisk kan brukes.
