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

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

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

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

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

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!

E-bok + VoiceOver = Lydbok

Orker du ikke lese selv kan du få telefonen eller brettet ditt til å gjøre det for deg.

E-bokmarkedet har fortsatt ikke tatt helt av her til lands. Samtidig har lydbøker blitt mer populært. Kjører man bil eller gjør andre ting som krever øynenes oppmerksomhet kan det være vel så greit å høre Kim Haugen lese boka for deg.

Men så er det ikke alltid Kim Haugen eller noen andre som er flinke til å lese har rukket å lese inn akkurat den boka du er interessert i. Da skal du vite at så lenge boka finnes som e-bok, så kan du få VoiceOver eller TalkBack til å lese boka for deg i stedet.

For å ha noe lesestoff til sommerens hytteferie lastet jeg ned Alexander - Skjebnens sønn av Valerio Massimo Valfredi for å fordrive noen timer i solen. Men den sterke solen og varmen gjorde det slitsomt å myse mot telefonen, selv om skjermen faktisk var ganske lesbar i lyset. Det var da jeg tok frem ørepluggene og skrudde på VoiceOver. Ved å bla til riktig side, skru på VoiceOver og dra ned skjermen med to fingre, leste VoiceOver boken for meg, side for side.

Men jeg skal ikke forsøke å lure noen til å tro at VoiceOver sin syntetiske stemme leser med mer innlevelse enn Kim Haugen. Tvert i mot, VoiceOver har dessuten en del merkelige talefeil som burde lukes bort ved neste oppdatering. Fordelen er at utvalget er så mye større! Dessuten, når sola har gått ned eller bilen er parkert, så kan du legge bort ørepluggene og lese videre i den samme boka på gamlemåten.

Hvordan bruke iPad'en i sola i sommer

Det virker ikke bare enkelt å sette seg ut i hagen med dagens nettavis, men det finnes håp.

Noe er fortsatt best på papir, tror vi. Det er det i hvert fall lett å tenke når man setter seg ut i hagen en varm sommerdag for å lese avisen. På papir. iPad'en er det jo umulig å lese ute i sola. Tror vi.
Når det skarpe lyset reflekteres i skjermen blir du nemlig en del av en gruppe du kanskje ikke så ofte tenker på: de svaksynte.

Men Apple har laget gode hjelpemidler for denne gruppen som du nå for anledningen er en del av. Så hvorfor ikke bruke dem du også?

Så hva gjør man når man knapt klarer å lese det som står på skjermen? Man begynner med å gå inn på Innstillinger, deretter Generelt, før man blar seg litt nedover og velger Tilgjengelighet. Her er det mye moro man kan prøve ut.

Det første man kan prøve er å invertere fargene på skjermen. Det gjør at svart tekst på hvit bakgrunn blir hvitt på svart, eller omvendt. Noen ganger er det alt som skal til for å klare å lese teksten. Funker dog dårlig på Instagram og YouTube...

Hvis du fortsatt ikke ser noe kan du ta andre sanser i bruk. Et annet valg under Tilgjengelighet heter VoiceOver. Dette er Apple sin skjermleser som leser teksten på skjermen for deg. Navigeringen blir litt annerledes, så det er lurt å øve seg litt på dette før man surfer av gårde.

Når du har skrudd på VoiceOver kan du gå til hvilken som helst nettside og høre på den som en lydbok. Forutsatt at siden er universelt utformet, naturligvis.

Android-brukere har også disse mulighetene med TalkBack-funksjonen, men sist jeg sjekket hadde ikke denne en norsk stemme. Det kan høres rart ut på norske sider, men funker utmerket på engelskspråklige.

NB: Øreplugger er sterkt å anbefale hvis du forsatt vil ha et godt forhold til menneskene rundt deg. En gang jeg skulle demonstrere VoiceOver for noen kolleger tikket det inn en småsur sms fra en høygravid kone på overtid. Den ble lest opp i plenum før jeg rakk å skru den av, til stor forlystelse for mine kolleger.

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.

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.

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.

 

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.

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.

Ikke bare et framsideproblem

Det er en gjengs oppfatning i bransjen at universell utforming er noe som framsideutvikleren tar seg av. Så lenge denne gjør jobben sin skikkelig er tilgjengelighet en selvfølge. Feil! Alle som er involvert i web-utvikling har sin del av ansvaret for hva som presenteres brukeren.

Et enkelt eksempel

På FINN eiendom finnes et produkt som heter Ukens bolig. Det er noe megleren kan betale litt ekstra for, så vil annonsen vises over resultatlisten. Da jeg nylig gjorde noen endringer på dette produktet la jeg merke til at meglerens logo hadde alt-teksten "Logo" (teksten som kommer frem hvis et bilde ikke kan vises). Teknisk sett er ikke dette en feil fordi det obligatoriske attributtet var fylt ut, men innholdet er verdiløst. I stedet for å fortelle brukeren at det her skulle vært en logo der burde vi heller ha skrevet navnet på meglerkontoret.

Her burde den assosierte teksten være "Foss & Co".

Enkel sak, tenkte jeg, og prøvde å finne attributtet med navnet på kontoret. Jeg fant det ikke. Jeg gravde meg stadig dypere ned java-laget for å finne ut hvordan navnet kunne hentes opp til siden. Det viste seg til slutt at for å få til dette måtte database-prosedyrene skrives om. Da er det ikke lenger en enkel sak for en dum framsideutvikler.

Tenk tilgjengelighet i alle ledd

Skal man sikre god tilgjengelighet må alle involverte tenke på tilgjengelighet. Produktsjefen må tillate den ekstra tiden det tar å kvalitetssikre produktet. Designeren må velge farger med nødvendige kontraster, interaktivitet som tillater navigasjon med både mus, fingre og tastatur og alt det andre en tilgjengelig side krever. Backend-utvikleren må sørge for å få de nødvendige data oppover gjennom lagene. Til slutt må framsideutvikleren legge siste hånd på verket og sørge for at alle krav tilfredsstilles.

Hvis framsideutvikleren på egenhånd skal sørge for universell utforming på en løsning som er designet for alt annet, vil han fort føle seg som denne eksperten som skal tegne røde streker med blått blekk.

Universell utforming for funksjonsfriske mennesker

I løpet av nokså mange år som framside-utvikler hos finn.no har jeg fått meg et rykte for å være den som maser mest om at tjenesten må være universelt utformet. I et forsøk på å gjøre meg fortjent til dette ryktet våger jeg meg på å starte en blogg om temaet. Jeg skal forsøke å skrive mest om ting som bør være interessant for alle som jobber med eller mener noe om det som finnes på web'en, men en del teknisk fagprat kan det nok også bli.

Hva er universell utforming?

Hvem hadde trodd at noe som skulle hjelpe blinde med å skrive ville utvikle seg til å bli dette?

Universell utforming, eller tilgjengelighet, som jeg synes er et bedre ord, handler om at alle skal ha mulighet til å gjøre de samme tingene, selv om fysikken kan gjøre det vanskeligere for noen. Det er derfor man må bygge dører som er brede nok til at en rullestol kan passere og at det finnes blindeskrift på tastene i minibanken. Like kjent er det kanskje ikke at det er mulig for blinde å surfe på nettet eller at det kan gjøres uten bruk av mus eller trykkskjerm. Vel, det er ikke på alle sider det er mulig heller, men det er fordi mulighetene ikke brukes, ikke fordi de ikke finnes.

Historien har vist oss at oppfinnelser som var ment som hjelpemidler for funksjonshemmede viste seg å være vel så nyttige for funksjonsfriske mennesker. Den vakreste historien er om den italienske oppfinneren Pellegrino Turri, som så sterkt ønsket at hans blinde elskerinne skulle kunne skrive brev til han at han i 1808 oppfant skrivemaskinen.

Jeg har også hørt påstander om at fjernkontrollen ble produsert med tanke på invalide krigsveteraner, men det har vist seg å være langt flere som har problemer med å bevege seg fra sofaen til TV'n.

Jeg tør til og med påstå at hjulet ble funnet opp av en person med dårlig rygg. ;-)

Tilgjengelig web

Da HTML ble utviklet for 25 år siden var universell utforming et av de grunnleggende prinsippene. Likevel er dette langt fra vanlig praksis på de sidene vi finner på nettet i dag. HTML er et glimrende format til det det var ment å gjøre, nemlig å publisere dokumenter på Internett som kan vises på alle slags dingser i alle størrelser, uansett om det er med skjerm, høyttalere eller papir.

Det eneste man ikke klarte å forutse var hvilken suksess dette skulle bli. Næringslivet oppdaget raskt hvor billig og effektivt www kunne brukes til å nå ut med sine tjenester, men det trauste utseendet på sidene var ikke bra for nok datidens (og nåtidens) markedsfolk og designere, som savnet de frie tøylene man har når man designer trykksaker. Grafikk ble derfor i stor grad brukt til å erstatte tekst og ellers pynte på sidene. Hittil hadde man bare sett nettsider på PC-skjermer, og nettleseren het vanligvis Netscape, så at HTML skulle vært et portabelt format ble fort glemt.

For å holde interessen varm lanserte Netscape sine egne tags som skulle gjøre sidene lekrere. Da Microsoft lanserte sin Internet Explorer kom de igjen med sine tags, og dermed var galskapen i gang. W3C kom løpende etter og forsøkte å tilpasse HTML-standarden, men de hadde mistet kontrollen over utviklingen.

Vanskelig å gjøre alle til lags

Med Internet Explorer ferdig installert på alle PCer vant Microsoft den første nettleserkrigen mot slutten av 90-tallet. Dermed glemte folk ikke bare at nettsider skulle fungere på ulike enheter, men også på ulike nettlesere. Det eneste som gjaldt nå var å få ting til å se bra ut i Internet Explorer.

Microsoft fikk igjen konkurranse da Opera, Firefox og Chrome kom på banen utover 2000-tallet. Disse nye nettleserne var mer trofaste mot W3C sine standarder, men utviklerne fikk sitt svare strev med å lage sider som så bra ut både på disse nye nettleserne og på den nå akterutseilte, men akk fortsatt så markedsterke Internet Explorer 6.

Endelig kom smarttelefonene på markedet, og verdien av å gjøre nettsidene lesbare andre steder enn på PCen ble tydelig. Men jeg er sikker på at man hadde begynt med mobilsurfing mye tidligere hvis grunnprinsippene for HTML og tilgjengelighet hadde blitt fulgt fra starten av.

Det neste store

Om mobilrevolusjonen har lært oss noe gjenstår å se. Ingen vet hva the next big thing blir, men vi kan være rimelig sikre på at innholdet også der vil være basert på HTML. Hvis man klarer å holde seg til universelt utformet HTML vil man trolig være tilgjengelig på den nye duppeditten fra dag en, i stedet for å lage enda en app eller spesialtilpasset side.

Fra 1.juli trer den nye tilgjengelighetsloven i kraft. En slik lov som krever at nettjenester skal være mulig å bruke også av folk med funksjonshemminger burde ikke være nødvendig, men kanskje er pålegg og bøter det eneste språket folk forstår. Håper at næringen i stedet for å skrike opp om overformynderi heller vil oppdage hvilke muligheter tilgjengelige nettsider vil åpne for.