Lanseringsporten for universell utforming: Seks tester før nettsiden publiseres

Universell utforming blir ofte kontrollert for sent. Designet er godkjent, løsningen er utviklet, innholdet er lagt inn, og først rett før lansering oppdager noen at menyen ikke kan brukes med tastatur eller at feilmeldingene i skjemaet ikke blir lest opp.

En bedre arbeidsform er å etablere en fast lanseringsport. Ingen ny sidetype, komponent eller viktig kundereise publiseres før den har bestått et lite sett med tilgjengelighetstester. Det gjør WCAG-arbeidet mer konkret og reduserer kostbare rettelser etter lansering.

WCAG må omsettes til kontrollerbare krav

WCAG beskriver hva en tilgjengelig nettløsning skal oppnå. Retningslinjene er nødvendige, men de fungerer dårlig som eneste arbeidsliste i et prosjekt. Designere, utviklere, innholdsprodusenter og produkteiere trenger krav som kan kontrolleres på den faktiske nettsiden.

Et generelt krav som «nettsiden skal følge WCAG» bør derfor suppleres med akseptansekriterier som dette:

• Alle interaktive elementer kan nås og brukes med tastatur.
• Det er alltid synlig hvilket element som har tastaturfokus.
• Tekst og viktige grafiske elementer har tilstrekkelig kontrast.
• Overskrifter, lenker, knapper og skjemafelt har forståelige navn.
• Feil i skjemaer blir identifisert og forklart i tekst.
• Innholdet gir mening når det leses med skjermleser.

Slike kriterier kan brukes både ved designgjennomgang, utvikling, innholdsarbeid og sluttkontroll. De gjør det også lettere å avgjøre om noe faktisk er klart for publisering.

Test 1: Legg bort musen

Start med tastaturet. Last siden på nytt, og bruk Tab for å bevege deg fremover. Bruk Shift og Tab for å gå bakover. Enter og mellomrom skal aktivere relevante lenker, knapper og kontroller. Piltastene brukes i enkelte komponenter, blant annet menyer, faner og valggrupper.

Kontroller tre ting underveis. Først må alle funksjoner være tilgjengelige. Deretter må rekkefølgen være logisk. Til slutt må fokus være tydelig synlig. En svak markering som forsvinner mot bakgrunnen, er ikke tilstrekkelig for en bruker som trenger å se hvor på siden hen befinner seg.

Vær særlig oppmerksom på nedtrekksmenyer, dialogvinduer, søk, filtre, karuseller og egendefinerte valgkomponenter. Dette er områder der løsninger laget for museklikk ofte svikter.

Hvis en dialog åpnes, skal tastaturfokuset flyttes inn i dialogen. Brukeren må kunne betjene innholdet og lukke dialogen uten mus. Når den lukkes, bør fokuset returnere til elementet som åpnet den.

Test 2: Kontroller kontrast i faktiske tilstander

Kontrastkontroll handler om mer enn vanlig brødtekst på hvit bakgrunn. Test også liten tekst, tekst på bilder, menyelementer, hjelpetekster, plassholdere, ikoner og grafikk som formidler informasjon.

Kontrollen må omfatte alle tilstander. En knapp kan ha god kontrast før den aktiveres, men bli vanskelig å se når den får tastaturfokus eller er deaktivert. En lenke kan være tydelig i utgangspunktet, men nesten forsvinne etter at den er besøkt.

Ikke bruk farge som eneste signal. Et rødt felt rundt en skjemakontroll forteller lite til en person som ikke oppfatter fargen, eller som bruker skjermleser. Kombiner fargen med tekst, ikon eller en annen synlig markering. Det samme gjelder statusmeldinger, diagrammer og valg i en bestillingsprosess.

Kontrast bør måles med et egnet verktøy, ikke vurderes på øyemål. Samtidig må den visuelle helheten testes på ordentlige skjermer og mobiltelefoner. Reflekser, lav lysstyrke og små skjermer kan gjøre en tilsynelatende tydelig løsning krevende å bruke.

Test 3: Lytt til siden med skjermleser

En skjermlesertest avdekker problemer som ikke er synlige. Brukeren får informasjon gjennom struktur, navn og rekkefølge, ikke gjennom plassering og visuell utforming.

Begynn med sidetittelen og overskriftene. Gir de en forståelig oversikt? Hopp deretter mellom lenker. Lenketekster som «les mer» og «klikk her» mister ofte mening når de presenteres uten teksten rundt. Bruk heller beskrivelser som forteller hva lenken fører til.

Kontroller knapper, bilder og ikoner. En knapp må ha et navn som beskriver handlingen. Et ikon som alene åpner søket, må bli lest opp som søk og ikke som et filnavn eller et uforståelig symbol. Informative bilder trenger en tekstlig beskrivelse, mens rent dekorative bilder bør kunne ignoreres.

Test også om innholdet blir lest i en logisk rekkefølge. Visuell plassering med CSS kan gi en annen rekkefølge enn den som ligger i koden. Resultatet kan være at en forklaring leses opp etter knappen den skulle forklare.

Test 4: Send inn skjemaet feil med vilje

Det er ikke nok å fylle ut skjemaet korrekt. De viktigste tilgjengelighetsproblemene viser seg ofte når brukeren gjør en feil.

Send inn uten å fylle ut obligatoriske felt. Skriv feil format i e-postfeltet. Velg en kombinasjon som ikke er tillatt. Kontroller deretter om feilen blir oppdaget, forklart og koblet til riktig felt.

Et tilgjengelig skjema trenger synlige etiketter som forteller hva hvert felt gjelder. Instruksjoner må komme før brukeren trenger dem. Krav til datoformat, passord eller organisasjonsnummer bør derfor stå ved feltet, ikke først vises etter en mislykket innsending.

Når skjemaet avvises, bør brukeren få en kort oppsummering og konkrete meldinger ved de aktuelle feltene. Tastaturfokus må håndteres slik at feilen blir enkel å finne. Meldingen «ugyldig verdi» er sjelden nok. Forklar hva som må rettes.

Kontroller til slutt bekreftelsen. Det må være tydelig at innsendingen er mottatt, hva som skjer videre, og om brukeren trenger å gjøre noe mer.

Test 5: Forstørr og endre visningen

En tilgjengelig side må tåle at brukeren forstørrer tekst eller hele grensesnittet. Test derfor siden med betydelig zoom på en vanlig dataskjerm, og kontroller den på en smal mobilvisning.

Se etter tekst som blir skjult, knapper som havner utenfor skjermen, horisontal rulling og menyer som dekker innholdet. Kontroller også at brukeren ikke må rulle i to retninger for å lese vanlig tekst.

Komponenter med fast høyde skaper ofte problemer. En kort knappetekst kan passe i designskissen, men bli kuttet når teksten forstørres eller erstattes med en lengre formulering. Fleksible flater og god plass rundt innholdet gjør designet mer robust.

Test 6: Kontroller språk og forståelse

Teknisk tilgjengelighet er ikke nok hvis innholdet er vanskelig å forstå. Bruk tydelige overskrifter, korte avsnitt og konkrete handlingsord. «Send forespørsel» er mer presist enn «Gå videre» når det faktisk er dette knappen gjør.

Forklar faguttrykk som målgruppen ikke kan forventes å kjenne. Unngå at viktige valg skjules bak intern terminologi. Informasjon om pris, binding, frister og konsekvenser bør stå nær handlingen den gjelder.

Les også siden uten å se på bildene. Hvis viktig informasjon bare finnes i en illustrasjon, video eller fargekode, må den få et tekstlig alternativ. Videoer med tale trenger teksting, og viktig visuelt innhold må kunne forstås av personer som ikke ser det.

Fordel ansvaret før testen begynner

Lanseringsporten fungerer bare når noen har ansvar for hvert område. Designeren bør kontrollere kontrast, fokusmarkering og visuelle tilstander. Utvikleren bør teste semantikk, tastaturbetjening og teknisk støtte for hjelpemidler. Innholdsprodusenten bør kontrollere overskrifter, lenketekster, bildebeskrivelser og språk. Produkteieren må avgjøre om kritiske feil stopper publisering.

Registrer avvik med skjermbilde, hvilken side eller komponent det gjelder, hvordan feilen kan gjenskapes, og hvem som berøres. Prioriter problemer som hindrer brukeren i å fullføre en oppgave. En knapp som ikke kan aktiveres med tastatur, er mer kritisk enn en mindre ujevnhet i teksten.

Gjør porten liten nok til å bli brukt

En omfattende revisjon har sin plass, men den daglige kvalitetssikringen må være gjennomførbar. Lag en fast sjekkliste for nye maler, komponenter og sentrale kundereiser. Kjør den før første publisering og etter større endringer.

Automatiske tester kan finne enkelte feil, men de kan ikke avgjøre om fokusrekkefølgen er fornuftig, om en feilmelding er forståelig eller om skjermleseropplevelsen henger sammen. Kombiner derfor verktøy med manuell bruk av tastatur, skjermleser og forstørret visning.

Målet er ikke å samle flest mulig avkryssinger. Målet er at flere mennesker skal kunne forstå innholdet, navigere på siden og fullføre oppgaven uten unødvendige hindringer. Når denne kontrollen blir en faktisk lanseringsport, blir universell utforming en del av leveransen i stedet for en opprydding i etterkant.