mandag 1. desember 2014

5 tiltak for et tilgjengelig finn.no

Det ble nylig avholdt en intern tech dag for utviklerne i finn.no. Der holdt jeg en lyntale hvor jeg nevnte 5 tiltak som ble gjort på m.finn.no for å gjøre tjenesten mer universelt utformet. Dette er sånn cirka hva jeg sa:

Jeg hadde egentlig tenkt å prate om alt som er feil på finn, men etter at vi hadde Blindeforbundet på besøk i forrige uke, hvor en blind og en sterkt svaksynt demonstrerte hvordan de brukte finn og vi så at de stort sett klarte det de skulle gjøre, gikk det opp for meg at vi egentlig ikke er så aller verst. Tilbakemeldingen fra dem var at mye av det som gjenstår er å regne som pirk. Ikke dermed sagt at vi er i mål, men jeg synes vi for en gangs skyld kan være litt positive og se noen eksempler på problemer vi har tatt tak i, og hvordan de er løst.

Zoom

Metataggen viewport med maximum.scale=1 og user-scaleable=no strøket over
Denne metaggen nekter brukere på mobil å forstørre sidene, en slem ting å gjøre.

Den mest alvorlige feilen vi hadde på m.finn i våres var at det ikke var mulig å forstørre bildet. For svært mange blir teksten på en mobilskjerm for liten slik at det er greit å kunne zoome inn litt, i tillegg til at folk også kan studere bildene nærmere. Det ble fikset ganske enkelt ved å fjerne de to parametre det er satt en rød strek over på denne metatagen som nektet brukerne å zoome. Det er fortsatt noen sider på finn hvor man ikke kan forstørre sidene, så test deres egne sider med en gang og fjern disse parameterne. (Dagen etter at dette ble sagt hadde 3 nye markeder på finn blitt skalerbare)

Fotnote: Hvis du leser dette på mobil, så har du sikkert allerede avslørt at sidene på min blogg ikke lar seg forstørre. Akk, så ironisk. Årsaken til dette er at Blogger har nettopp disse forbannede parametrene i sine mobilmaler, og jeg har ikke funnet ut hvordan jeg fjerner. Så mitt tips til deg som ønsker en universelt utformet blogg er inntil videre: ikke velg Blogger!

Ikoner

Annonse på finn.no med vanlig visning og i høykontrastmodus.
Bildet til høyre er en annonse på finn.no i høykontrastmodus. Flere funksjoner blir borte fordi ikonene ligger som bakgrunnsbilder.

Ikoner er noe som har gjennomgått mye forandring gjennom årene. I gamle dager var et ikon en grafikkfil, og det var greit nok, bortsett fra at det ble mange requests mot serveren og dermed dårlig for ytelsen. Derfor gikk vi over til å bruke sprites, hvor flere ikoner ble trikset inn på samme bakgrunnsbilde. Det fikk fart på ytelsen, men vi brøt en grunnleggende lov med webdesign, nemlig at innhold ikke skal blandes med styling. Dermed fikk vi det vi ser på høyre side, som er en annonseside i høykontrastmodus, noe som er veldig nyttig for mange svaksynte. Den fjerner bakgrunnsbildene fordi den ikke anser det som vesentlig innhold. Der ser dere at logoen er borte. Ille nok, men kan noen fortelle meg hvordan man printer ut denne siden? Senere gikk vi over til å bruke font-ikoner, som f.eks. viser et hus når vi skriver utropstegn, men problemet er at skjermlesere fortsatt leser dette som utropstegn. Det har vi også klart å kode oss bort i fra, men enda bedre blir det når vi snart går over til å bruke svg til ikoner, dermed får vi både bedre ytelse, skalerbarhet og ikoner som ikke utgir seg for å være noe annet enn nettopp det.

Tastenavigering

En resultatlise på m.finn.no hvor annonsen i fokus er markert med en rød kantlinje.
I resultatlistene på m.finn.no markerer vi linkene i fokus med en rød kantlinje.

En annen ting er tastenavigering. Hvor mange er det som foretrekker å bruke tastekombinasjoner på desktop applikasjoner fremfor å bruke musa? Og hvor mange er det som gjør det samme på web? Hvorfor ikke? Vi har egentlig aldri vært spesielt dårlig på tastenavigasjon, men på m.finn har vi blitt gode, bla ved å tydelig markere hvilken link vi er på. Når vi navigerer er det mulig å hoppe over toppmenyen hvis man vil gå rett på sak, og på resultatsiden kan man også velge om man vil hoppe til filteret eller resultatet.

Tastevennlige filtre

Søkesiden på m.finn.no som viser et vindu for inntasting av beløp som alternativ til slidere.
Slidere eller tekstbokser for å begrense prisfilteret? Ja takk, begge deler! 

I filtrene bruker vi slides når vi skal velge f.eks. en pris. Det er jo veldig kjapt å bruke på mobil og brett, men sitter man på en humpete buss kan det være vanskelig å treffe riktig beløp. Så nå har vi også gjort det mulig å taste inn beløpet hvis vi skulle ønske det. Dessuten, den slideren går ikke lavere enn en million, og for noen er det fortsatt veldig mye penger.

Skjermleservennlig informasjon

En søkeside på m.finn.no som sier "5 treff" i stedet for bare "5", fordi teksten har attributtet "title=5 treff".
Ved å legge til attributtet "title=5 treff" klarer skjermleseren å lese mer meningsfylt informasjon for brukeren.

Når man gjør et søk med skjermleser på, følg med på hva den sier om hvor mange treff vi har. Hadde den bare sagt tallet, så hadde det vært vanskelig å putte det inn i kontekst. Men her sier den "5 treff". Dette er små ting vi kan gjøre som kan gjøre finn mye enklere å bruke.

Jeg sa innledningsvis at det som gjenstår av universell utforming på finn er å regne som pirk. Det betyr ikke at vi er i mål. Prøv å zoome skjermen til tredobbel størrelse i høykontrastmodus, eller naviger med tastene med skjermleseren på, så vil du fortsatt oppleve merkelige ting. Men hvis vi alle tenker på disse eksemplene når vi utvikler, vil vi fortsette å lage løsninger som er superbra - for alle!