Før nettsiden publiseres: En praktisk akseptansetest for universell utforming

Kategori: Universell utforming

Universell utforming blir ofte behandlet som en kontroll helt på slutten av et nettsideprosjekt. Da er navigasjon, farger, komponenter og skjemaer allerede bestemt. Feilene som oppdages, kan derfor bli unødvendig dyre å rette.

En bedre løsning er å bruke en fast akseptansetest før nye sidetyper, funksjoner og skjemaer godkjennes. Testen trenger ikke være omfattende hver gang. Den må derimot være konkret, repeterbar og utføres av personer som vet hva de skal se etter.

Denne testløypen dekker sentrale deler av WCAG i praksis: tastaturnavigasjon, fokus, kontrast, forstørring, skjermlesere, skjemaer og forståelig innhold. Målet er ikke bare å krysse av krav, men å undersøke om mennesker faktisk kan bruke løsningen.

Start med representative oppgaver

Ikke test nettsiden som en samling isolerte elementer. Velg noen få oppgaver som representerer det brukerne kommer for å gjøre. Det kan være å finne kontaktinformasjon, navigere til en tjeneste, sende en forespørsel, melde seg på et arrangement eller gjennomføre et kjøp.

For hver oppgave bør teamet skrive ned:

• Hvor brukeren starter.
• Hva brukeren skal finne eller gjøre.
• Hvilke sider og komponenter oppgaven berører.
• Hva som kjennetegner en vellykket gjennomføring.

Dette gjør testen mer realistisk. En meny kan for eksempel fungere isolert, men skape problemer når brukeren må åpne en undermeny, forstå hvilken side som er valgt og deretter finne riktig knapp i innholdet.

Test 1: Legg bort musen

Den enkleste manuelle testen er å bruke nettsiden med tastatur. Start øverst på siden og bruk tabulatortasten for å bevege deg mellom interaktive elementer. Bruk Shift og tabulatortasten for å gå bakover, Enter for å aktivere lenker og knapper og piltaster der komponenten forventer det.

Kontroller rekkefølgen

Fokuset skal følge en logisk rekkefølge. Det bør normalt bevege seg gjennom toppmeny, hovedinnhold og videre funksjoner på en måte som samsvarer med sidens struktur. Hvis fokuset hopper tilfeldig mellom områder, blir oppgaven vanskelig å forstå.

Vær særlig oppmerksom på menyer, søkefelt, dialogbokser, faner, nedtrekkslister og karuseller. Slike komponenter kan se riktige ut, men være vanskelige eller umulige å bruke uten mus.

Se etter synlig fokus

Det må alltid være tydelig hvilket element som har tastaturfokus. En svak fargeendring er ofte utilstrekkelig. En klar ramme, understrek eller annen synlig markering gjør det lettere å orientere seg.

Kontroller også at fokusmarkeringen ikke skjules bak en fast toppmeny, et informasjonsbanner eller andre elementer som ligger over innholdet.

Pass på tastaturfeller

Brukeren skal kunne bevege seg inn i og ut av komponenter. Hvis fokuset blir sittende fast i en meny, videospiller eller dialogboks, har løsningen en tastaturfelle. Åpnes en dialogboks, bør fokuset flyttes inn i den og returneres til et fornuftig sted når den lukkes.

Test 2: Undersøk kontrast og visuell forståelse

God kontrast handler ikke bare om brødtekst. Test også navigasjon, knapper, lenker, skjemafelt, feilmeldinger, ikoner og fokusmarkeringer. Små tekster og tynne symboler er spesielt sårbare når fargeforskjellen er svak.

Bruk et egnet kontrastverktøy for å måle kombinasjonene, men vurder også siden visuelt. Tekst som ligger over fotografier eller fargegraderinger, kan ha god kontrast ett sted og dårlig kontrast et annet. En fast bakgrunn bak teksten gir ofte et mer robust resultat.

Ikke bruk farge alene

Informasjon må kunne forstås uten at brukeren skiller mellom bestemte farger. Et obligatorisk felt bør ikke bare markeres med rødt. En feilmelding bør inneholde tekst som forklarer problemet. En graf bør bruke etiketter, mønstre eller symboler i tillegg til farger.

Lenker i løpende tekst må også være lette å kjenne igjen. Understreking er som regel en tydeligere markering enn en liten fargeforskjell.

Test 3: Forstørr siden og endre visningen

Forstørr nettsiden betydelig i nettleseren og gjennomfør de samme oppgavene på nytt. Innholdet bør tilpasse seg uten at tekst, knapper eller skjemafelt forsvinner. Brukeren skal heller ikke måtte flytte visningen både sidelengs og nedover for å lese vanlige tekstsider.

Se etter overskrifter som kuttes, knapper der teksten ikke får plass, menyer som dekker innhold og dialogbokser som blir høyere enn skjermen. Test også smal visning. Universell utforming og responsivt design møtes ofte i de samme problemene.

Test 4: Lytt til siden med skjermleser

En skjermlesertest avdekker om den tekniske strukturen formidler det samme som det visuelle designet. Det er ikke nødvendig at alle i prosjektet er eksperter, men minst én person bør kunne utføre grunnleggende kontroll med en vanlig skjermleser.

Kontroller sidens struktur

Lytt til sidetittelen og naviger mellom overskriftene. Overskriftene bør beskrive innholdet og danne en forståelig disposisjon. De skal ikke velges ut fra ønsket skriftstørrelse. Visuell størrelse hører hjemme i designet, mens overskriftsnivåene beskriver struktur.

Kontroller deretter landemerker, menyer, lenker og knapper. En knapp med teksten «Les mer» kan være forståelig visuelt, men bli uklar når skjermleseren presenterer den uten omgivelsene. Teksten bør forklare hva brukeren kan lese mer om.

Vurder bilder og ikoner

Meningsbærende bilder trenger en tekstlig beskrivelse som formidler formålet. Dekorative bilder bør ikke skape støy. Ikoner som fungerer som knapper, må ha et tilgjengelig navn. Et forstørrelsesglass kan være åpenbart for noen som ser det, men funksjonen må også formidles som for eksempel «Søk».

Unngå å beskrive alt som finnes i bildet hvis detaljene ikke er relevante. En god alternativ tekst formidler det brukeren trenger i sammenhengen.

Test 5: Gjennomfør skjemaet med feil

Skjemaer bør ikke bare testes med korrekte opplysninger. Skriv inn feil format, hopp over obligatoriske felt og forsøk å sende inn. Det er i feilsituasjonene mange tilgjengelighetsproblemer blir synlige.

Etiketter må være tydelige

Alle felt trenger en synlig etikett som blir stående når brukeren skriver. Plassholdertekst alene er en svak løsning fordi den forsvinner under utfylling og ofte har lav kontrast.

Instruksjoner bør komme før de trengs. Hvis et passord, organisasjonsnummer eller dato må følge et bestemt format, bør dette forklares ved feltet før innsending.

Feil må kunne finnes og rettes

En god feilmelding sier hvilket felt som har feil, hva problemet er og hvordan det kan rettes. «Ugyldig verdi» er sjelden nok. «Skriv inn dato som dag, måned og år» gir brukeren en konkret vei videre.

Etter innsending bør fokus flyttes til en feilsummering eller et annet tydelig startpunkt. Feilmeldingen må være koblet teknisk til riktig felt, slik at skjermleserbrukere får den nødvendige informasjonen.

Test 6: Vurder språk og inkluderende design

En løsning kan oppfylle mange tekniske krav og fortsatt være vanskelig å bruke. Les derfor siden med tanke på forståelse og beslutninger.

• Har knapper konkrete navn som beskriver handlingen?
• Er lange tekster delt med beskrivende overskrifter?
• Forklares faguttrykk når de er nødvendige?
• Er viktig informasjon plassert før brukeren må ta et valg?
• Kan oppgaven gjennomføres uten tidspress eller unødvendige avbrudd?
• Er kontaktalternativer og hjelp enkle å finne?

Praktisk inkluderende design handler også om å tåle variasjon. Brukere kan ha nedsatt syn, motoriske utfordringer, lesevansker eller midlertidige begrensninger. De kan bruke nettsiden i sterkt sollys, med én hånd eller under tidspress. Et robust grensesnitt hjelper flere enn dem som omfattes av én bestemt målgruppe.

Gjør funnene håndterbare

Registrer hvert avvik med side, komponent, oppgave, forventet resultat og faktisk resultat. Legg gjerne ved et skjermbilde, men sørg for at tekstbeskrivelsen er tilstrekkelig. «Skjemaet fungerer ikke» er vanskelig å rette. «Fokus flyttes ikke til feilmeldingen etter innsending» er konkret.

Prioriter først problemer som stopper brukeren fra å gjennomføre en oppgave. Deretter kommer feil som gjør oppgaven vesentlig vanskeligere, og til slutt forbedringer som gir tydeligere og mer behagelig bruk.

Automatiske tester kan finne en del tekniske avvik, men de kan ikke alene avgjøre om fokusrekkefølgen er logisk, om en alternativ tekst er nyttig eller om en feilmelding er forståelig. Kombiner derfor automatiske kontroller med manuell testing.

Fordel ansvaret før neste publisering

Universell utforming bør ikke være én utviklers kontrollpunkt. Designeren må sikre kontrast og tydelige tilstander. Utvikleren må bygge korrekt struktur og tastaturstøtte. Innholdsansvarlig må skrive forståelige overskrifter, lenketekster og bildebeskrivelser. Produkteier eller prosjektleder må sette av tid til testing og retting.

Den mest nyttige akseptansetestingen skjer fortløpende. Test navigasjonen når den er bygget, skjemaet når det fungerer, og innholdsmalene før mange sider produseres. Da blir universell utforming en del av kvalitetsarbeidet, ikke en opprydding rett før lansering.