lørdag 31. mai 2014

Hvordan kvalitetssikre universell utforming

Lukk øynene og tegn en blomst. Ser den bra ut? Slik kan det føles å lage universelt utformede nettsider også. Utvikleren ser ikke nødvendigvis det samme som brukeren når hjelpemidler brukes. Den mest brukte skjermleseren for blinde, JAWS, er langt fra gratis, og ikke alle (snarere svært, svært få) selskaper tar seg råd til å kjøpe inn dette verktøyet. Bruk av skjermleser er dessuten noe som krever trening. Man må nok i praksis faktisk være blind for å oppleve hvordan det er å surfe i blinde.

Veldig stygg blomst
Mitt forsøk på å tegne en blomst i blinde

Og hva med alle andre hjelpemidler? Man skal både ha mye kunnskap og fantasi for å forestille seg alle mulige hjelpemidler som finnes der ute for alle mulige handicap. Alt dette trenger man heldigvis ikke vite, men noen innblikk er det mulig å få.
 

WCAG er din venn

Det er heldigvis noen som har gjort jobben for deg med å finne ut hva som må gjøres for at det du lager skal kunne brukes av alle mulige mennesker. Det de har kommet frem til er samlet i listen WCAG 2.0. Dette er en liste på 61 punkter som man bør sjekke om fungerer på nettsidene. Disse er gradert fra nivå A, som er det nødvendigste, til AAA, som er toppkarakter. Den nye tilgjengelighetsloven krever at de 35 punktene med nivå A og AA oppfylles.

Automatisk validering

WCAG 2.0 bør sjekkes manuelt før man skal lansere store endringer, men i det dagligdagse arbeidet kan dette bli vel tidkrevende. Heldigvis finnes det verktøy som gjør grovarbeidet for deg.

Det enkleste verktøyet å komme kjapt i gang med er nok Chrome-tillegget Accessibility Developer Tools. Man trenger bare å installere dette tillegget i Chrome, så legger den seg i Chrome's utviklerverktøy (F12) under Audit-knappen. I stedet for å henvise til WCAG 2.0 refererer den fra sitt eget regelsett, som stort sett går ut på det samme.

Skjermdump av Accessibility Developer Tools
Accessibility Developer Tools er lett å bruke, men kunne gjerne henvist til WCAG 2.0.
Min foreløpige favorittvalidator er TotalValidator, når det først er installert, vel å merke. Det er en selvstendig applikasjon som har en plugin til Firefox og Chrome. Det plasserer et ikon nederst i høyre hjørne som man kan klikke på når som helst mens man utvikler, og den forteller deg hvilke mangler du har i koden. Både Accessibility Developer Tools og TotalValidator kjører lokalt på din pc, slik at sidene du lager ikke trenger å være online for at validatoren skal kunne lese dem.
 

Skjermdump fra Total Validator
TotalValidator er enkel å bruke på lokale statiske sider, når den først er installert.

Ulempene med TotalValidator er at de kan ha problemer med tilgangen til sider som krever innlogging. Et annet problem er at den kun ser den opprinnelige kildekoden, ikke javascript-genererte oppateringer. Da må kan ty til en online validator som Achecker. Her kan du enten validere en online side direkte eller lime inn html-kode fra Firebug eller liknende inspektører for å få med den riktige kildekoden. CynthiaSays er en annen lekker online validator, men den kan kun validere online sider direkte.

Skalering

Man trenger ikke ha spesielt dårlig syn før man får problemer med liten skrift. De fleste desktop nettlesere skjærer igjennom alle sider uansett hvor dårlig utformet de er med tastekombinasjonen ctrl+ og ctrl- for større eller mindre skrift. På mobiler og tablets derimot, er det mulig å låse sidens størrelse til skjermen, noe som gjøres alt for ofte. Tekst hugget i stein hører hjemme i steinalderen, og designerne må tørre å slippe stålkontrollen på sidene sine slik at alle skal kunne lese dem.

Tastenavigering

En av de enkleste måtene å teste på er å navigere med tastaturet. Med et enkelt design burde det ikke være noe problem å bestå denne testen, men har man rotet det til med komplisert layout kan man fort få en aha-opplevelse. Blir det veldig mange tastetrykk med tab og piltaster før man kommer til kjernen av innholdet bør man revurdere designet, lage snarveier eller bruke tabindex på de viktigste feltene (med forsiktighet).

Mobiltjeneste, sier du? Bruker man ikke tastatur på mobiltelefoner? Er du sikker? Det er fullt mulig å koble et tastatur til en mobiltelefon. Har du f.eks. prøvd å bruke en pris-slider på en humpete buss? Det har jeg, og det ble dyrt. En av de største feilene man kan gjøre er å anta hva brukerne bruker eller ikke bruker.

Skjermlesere

Den vanligste skjermleseren, JAWS, men uten velvilje fra NAV er den som nevnt vanskelig for oss andre å få ta i. Men det finnes alternativer. For utviklere er det enkleste å installere ChromeVox til Chrome-nettleseren. Den fungerer enkelt og greit med at den leser opp den teksten man drar musa over. Test spesielt grafikk og skjemaer. Finnes det alternativ tekst til alle bilder og etiketter til alle skjemafelter? Hvis ikke vil du oppdage det nå. Ulempen med ChromeVox er at den ikke har norsk tale, dermed kan norsk tekst høres rart ut.

Min favoritt skjermleser er Apple sin VoiceOver. Den skrus på under innstillingene for tilgjengelighet på iPhone og iPad. Den leser opp teksten du drar fingeren over, og den fungerer bra på norsk. Neste gang du sitter med iPad eller iPhone ute i sola, skru på VoiceOver, og vips har du en lydbok i stedet for en uleselig nettside.

Skjermdump av hvordan VoiceOver skrus på med iPhone.
VoiceOver skrus på under innstillinger og tilgjengelighet.
Tilsvarende funksjon finnes også på Android-telefoner, men i skrivende stund har heller ikke disse norsk ordliste.

Skal du virkelig sette deg inn i hva de blinde ser (eller ikke ser), så installerer du NVDA. Det er en gratis skjermleser som fungerer for hele operativsystemet, akkurat som JAWS. Det spås at NVDA kommer til å overta dominansen til JAWS i nær fremtid. I såfall blir hverdagen litt enklere for oss utviklere.

Brukertest

Når du har validert alle dine sider, navigert med tastaturet, skalert sidene og sjekket at skjermleserne får med seg alt som står, da vil nok sidene også passere tilgjengelighetsloven. Vil du at sidene skal være ekstra robuste kan du få sidene brukertestet av "ekte" funksjonshemmede mennesker. Selskaper som Funka Nu og MediaLT har spesialister (ofte funksjonshemmede) på hjelpemidler som kan teste nettsteder på måter og med utstyr som for de fleste av oss er vanskelig å forholde seg til. Dette er selvsagt ikke gratis og kan være steget for langt for de med lavt budsjett, men vil man briljere er disse nyttige å bruke.