With a little pelp to my friends

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

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.

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.

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.

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.

 

 

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!

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.

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.