søndag 7. juni 2015

With a little pelp to my friends

Utsnitt av temasiden til pelp.no.
På pelp.no kan du få tips om alt.

En gruppe med tidligere kolleger sluttet i FINN.no for å realisere de drømmer som ikke fikk oppfylt på gamlejobben. Resultatet ble pelp.no, hvor folk skal kunne spørre andre brukere om forbukertips eller dele sin visdom med andre. Jeg var en av de heldige inviterte som har fått leke meg her mens de har testet konseptet, men nå er produktet endelig sluppet fritt for alle.

Alle? La oss se på det. La oss se om pelp er universelt utformet. Jeg skal gjøre de samme testene på pelp.no som vi i uu-gruppa har fått de ulike teamene i finn.no til å gjøre på sine egne sider. Jeg skal teste om sidene er skalerbare, om det er enkelt å finne frem når sidene er forstørret, om det er mulig å finne frem med høykontrast-modus, om de kan navigeres med bare tastaturet, og om de funker med en skjermleser. Resultatet skal jeg publisere i all offentlighet til alle mine 86 månedlige brukere.

Denne testen er ingen skuddsikker garanti for at sidene oppfyller alle kravene i tilgjengelighetsloven. Det kan også hende at jeg henger meg opp i ting som ikke bryter med kravene. Men det er en nyttig test for å få en pekepinn på hvordan sidene oppleves for folk med ulike funksjonsnedsettelser.

Skalerbarhet

Den første testen avdekker den mest irriterende feilen, men den er kjapp å utføre og, hvis man full kontroll over eget rammeverk, enkel å fikse. Dette trenger man kun å teste på mobil fordi nettlesere på pc'er tvinger gjennom skalering av alle sider uansett. På mobiltelefoner derimot, er det mulig å låse sidens høyde og bredde til skjermen (noe som dessverre også er gjort på Bloggers mobilmaler, og dermed også denne bloggen). Dermed får man ingen hjelp hvis man synes teksten på siden er for liten.

Testen er såre enkel. Finn frem mobilen, gå inn på pelp.no og prøv å pinch-zoome siden for å gjøre den større. På pelp funker dette som en drøm. Bestått.

 

Sugerørstesten

Svaksynte mennesker må zoome mye for å kunne lese innholdet, og da må det også være mulig å finne frem med sterk zoom. Testen har fått navn etter det å se på sidene gjennom et sugerør, slik at man bare ser en liten del av siden av gangen. Det er flere måter å gjøre denne testen på. Man kan f.eks. lage et kikkehull gjennom knyttneven eller se gjennom et hull i et papirark. Det mest realistiske er å bruke operativsystemenes forstørringsverktøy, for det er det de svaksynte bruker. Selv foretrekker jeg å zoome maksimalt på mobilen.

Det er lov å jukse litt når man gjør denne testen, for det gjør de svaksynte også. Man kan zoome ut for å orientere seg om hvor elementene ligger, men så må man zoome inn igjen for å lese teksten. Denne testen er likevel en av de vanskeligste å tilfredsstille, særlig hvis man ønsker å opprettholde vennskapet med designeren.

Jeg synes Pelp kommer greit unna her også. Det er ikke til å unngå at man må zoome seg ut i blant for å orientere seg når man bruker skjermens fulle bredde, men de elementene som hører sammen er organisert vertikalt, slik at det er lett å gjøre det man skal selv om man kun ser en liten del av skjermen. De minimalistiske sidene viser deg ikke mer informasjon enn du trenger, og krever heller ikke mer informasjon enn de må ha. Da unngår de også å gjøre det vanskelig for seg selv når de skal lage et tilgjengelig design. Bestått.

 

Høykontrast

2 bilder av temasiden til pelp.no. En vanlig og en med inverterte farger.
Bildebakgrunnen gjør det vanskelig å lese teksten, særlig med inverterte farger.

Svaksynte er ofte ømfintlige for lys, noe som gjør hvit bakgrunn slitsomt. For andre kan det rett og slett være enklere å se på siden med andre farger, f.eks. når man sitter med iPad'en ute i sola. Det er flere typer høykontrastfiltre man kan bruke på ulike operativsystemer. Det enkleste, synes jeg, er å invertere fargene.

Invertering av farger på pelp.no gir et par avsløringer. Det første som slår en er at det som normalt er lysegrå tekst på hvit bakgrunn plutselig blir veldig vanskelig å lese. Kontrasten ser ikke ut til å bli mindre med inverterte farger enn normale, men kontrasten er ikke veldig stor i utgangspunktet. Om kontrastene er i tråd med wcag-kravene har jeg ikke sjekket.

Skjermbilde av en dialog på pelp i inverterte farger. Noe av teksten er lilla på sort bakgrunn.
Deler av teksten blir vanskelig å lese med inverterte farger.

 

I store trekk er det fortsatt enkelt å finne frem. De har gjennomgående valgt mørk tekst på lys bakgrunn, og da unngår de å legge ut feller for seg selv. Unntaket er den siden hvor man velger kategorier. Her er kategoriene skrevet med hvit tekst over et bilde. Dette er alltid en risiko å ta, for da kan teksten fort bli vanskelig å lese. Jeg har ingen alvorlige problemer med å lese kategoriene med normale farger, men når jeg inverterer dem blir det vanskeligere.

Bakgrunnsbildene på temasiden fikk meg til å sjekke denne siden ekstra nøye. Når man bruker Internet Explorer i høykontrastmodus på en windows-pc blir nemlig alle bakgrunnsbilder fjernet, noe som kan skape problemer for mange sider. Men pelp slipper unna her også. Bildene er ikke implementert med background-taggen, men som vanlige bilder med tekst som er stylet til å plassere seg over bildet. Dermed vises fortsatt bildene, og fordi tekstbakgrunnen gjøres svart, blir den likevel enklere å lese enn uten høykontrastmodus.

Skjermbilder av temasiden i Internet Explorer i vanlig modus og med høykontrastmodus. Der tekst ligger over et bilde bli bakgrunnen svart i høykontrastmodus.
Vanlig modus og høykontrast i Internet Explorer. Bildene i høykontrast blir kanskje ikke pene, men det er mulig å lese teksten.

 

Jeg gir pelp.no bestått også i høykontrast, men ville gjort en ny vurdering av den lysegrå teksten. Og med tekst over bildene på temasiden gjør de det litt vanskelig for seg selv. Jeg vil anbefale at de legger et halvtransperent lag mellom tekst og bilde for å unngå at teksten "blander seg" med bildet. Ved å gjøre teksten større og/eller fetere vil den også bli enklere å lese.

 

Tastenavigering

Når man skal lagre noe i Word eller et annet ikke web-basert program bruker man normalt ctrl+s når man først har lært seg kombinasjonen. Tilsvarende gjelder når man veksler mellom programmer, blar seg nedover dokumenter eller tilsvarende. Man lar musa ligge når man kan, så slipper man musearm i tillegg til at det går raskere. Pussig nok har man ikke de samme forventningene med websider, muligens fordi fordi for mange utviklere har klusset det til.

Utsnitt av headeren, hvor et av valgene er markert.
Her ser vi at snarveien til spørsmålene er i fokus, men fargen er ganske lik bakgrunnsfargene på deler av siden.

 

Når jeg begynner å navigere med tastaturet på forsiden til pelp.no begynner det bra. Logoen, som er det naturlige startpunktet på denne siden, markeres etter første trykk på tab. Men når jeg trykker for å komme til neste link forvinner markøren. Først 5 trykk senere dukker den opp igjen ved snarveien til spørsmålene. Det samme gjentar seg når jeg kommer til "Tema jeg følger". De har lagt en blå ramme rundt klikkbare elementer som er i fokus, men har ikke vært konsekvente i bruken. Markeringen burde også vært i en farge som ikke så lett går i ett med bakgrunnsfargene der hvor bakgrunnen er en annen enn hvit.

Også på temasiden får jeg problemer. På temaene med bildebakgrunn blir det veldig vanskelig å se markeringen, og selv om du aner hvilket tema markøren er på er det vanskelig å vite om du klikker på linken til temaet eller på følg-ikonet.

For å konkludere med det positive først: Tab-rekkefølgen på sidene er bra. De har ikke gjort noen grep for å kunne hoppe over headinger og komme raskere til innholdet, men på en såpass minimalistisk side savnes ikke dette. Det viktigste er at markøren hopper fra link til link i en forutsigbar rekkefølge, noe som også vitner om en ryddig markup bak siden. Men fargen på markøren bør de revurdere, samt sørge for at samtlige klikkbare elementer markeres.

 

Skjermleser

Svaksynte og blinde er helt avhengige av skjermlesere for å kunne lese en nettside. Her fant jeg frem telefon og headsett, og skrudde på VoiceOver.

Uffda, her snubler Pelp allerede på startstreken. Når jeg trykker på logoen sier damen i telefonen hva pelp.no er, men de har visst glemt å skrive navnet på tjenesten i alt-teksten sin.

Bortsett fra dette har jeg egentlig veldig lite problemer. Damen i telefonen leser opp den teksten som er relevant og unngår elementer som ikke er relevante, som f.eks. pilen ved siden av "Still spørsmål"-linken. Det største problemet er kanskje når knappen "Se alle" leses opp før overskriften "Nyeste spørsmål". Den motsatte rekkefølgen hadde vært mer naturlig. En annen ting de bør tenke over er når alt-teksten til bilder kan være blank, særlig på temasiden. Navnene på temaene leses opp veldig ofte når man skal velge et tema. Bestått likevel.

 

Konklusjon

Folk med nedsatt funksjonevne vil ha det mye enklere på pelp.no enn på de fleste andre sider. Om universell utforming er noe de har hatt spesielt fokus på vet jeg ikke, men jeg kjenner dem godt nok til å vite at de vet hva det er. Ved å lage sidene minimalistiske og kun fokusere på hva brukerne faktisk trenger har de gjort det enkelt for seg selv å lage en universelt utformet tjeneste. De har unngått feil som krever store, strukturelle endringer. De problemene jeg fant, som for det meste har å gjøre med fargevalg, bør det ikke ta mye tid å rette opp.