Husker du de gamle “tykke” applikasjonene vi brukte før? Overraskelse: de finnes enda og nettleseren din er en av dem. Når vi lager nye lettbente webapplikasjoner av de gamle tykke applikasjonene skal disse kjøre inne i en annen tykk applikasjon – nettleseren. De som skal bruke webapplikasjonene vi lager trenger tastaturnavigasjon for å være effektive og unngå skader. Men utviklingen går i feil retning: Før mus ble vanlig var alle applikasjoner styrt med tastatur. Nå er vanlige hurtigtaster som “sitter i fingrene” allerede tatt i bruk til nettleserfunksjoner. Og for å gjøre vondt verre har ikke de ulike nettleserne de samme tastekombinasjoner.

Det lar seg løse, men det krever en innsats: Her finner du våre tips til hvordan lage tastaturnavigasjon i webapplikasjoner.

Money talks
Når økonomisjefen og IT direktøren skal kjøpe regnskapsystem som kjører i nettleseren, eller systemarkitekten skal velge rammeverk er det ett argument de hører på: Penger. Presentér et regnestykke som viser kostnadene ved å velge et rammeverk uten full støtte for hurtigtaster som fører til tregt arbeid og i verste fall sykdom og oppsigelse.

Planlegg tastaturnavigasjon fra starten
Støtte for tastaturnavigasjon må være et krav på et så tidlig tidspunkt at rammeverket som velges har full støtte for dette. Brukerhistorier må ta høyde for det, og det må testes med tastatur i utviklingen.

Må det være en nettleser?
Nettlesere har “tatt” alle de beste hurtigtastene. Det gjelder skifte av faner, lagre, skriv ut osv. slik at det som sitter i fingrene fra de tykke applikasjonene ikke lengre kan brukes. Men kanskje du har mulighet til å bruke et annet kjøretidsmiljø? Et eksempel er rammeverket Flex fra Adobe som kan kjøres i Adobe Air-miljøet.

Gi hint om hurtigtaster i applikasjonen
Understreking av en bokstav viser at en tastekombinasjon aktiverer menyen eller funksjonen. Tooltips i menyer kan gi hint om at tastatursnarveier kan benyttes. Dette støtter gradvis læring og hurtigtaster oppdages lettere uten å pugge brukerveiledningen.

Vær konsekvent
Dersom Alt+bokstav eller Ctrl+bokstav kombinasjonen ikke er tilgjengelig fordi den er lagt beslag på av nettleseren kan du bruke Alt Gr. tasten eller shift som et alternativ. Hvis du gjør dette helt konsekvent vil bruker kunne huske at det er Alt Gr + en bokstav som fungerer. Dersom lagrefunksjonen bruker Ctrl+S i din applikasjon mens alle andre bruker Shift+bokstav vil det trolig være enklere om alle brukte Shift+S.

Pass på Tab-rekkefølgen
Tab-navigasjon gjelder ikke bare innenfor skjema, selv om det er viktig nok. Navigasjon mellom komponenter i skjermbildet skal også fungere. Dersom du på ikke kan bruke standardkombinasjoner for lagre, skriv ut m.fl. er det desto viktigere at Tab-rekkefølgen er effektiv. Det beste er å kunne bruke Tab for å skifte fokus mellom f.eks. to tabeller, og at eksempelvis piltastene lar deg navigere i selve tabellen.

Kast musa
Koble fra musa di og bruk en applikasjon eller webside utelukkende med tastatur. Det er lærerikt og gir god innsikt i hvordan du kan gjøre tastaturnavigasjon enkel og effektiv for brukerne. Først da får du sjekket om samtlige kontroller i applikasjonen er tilgjengelig via tastatur.

Andre tips

• Plassér automatisk markøren i første felt i skjemaet og spar bruker for et klikk
• Validér skjema etterhvert som bruker fyller ut. Det gir mer effektiv tastaturnavigasjon
• Ikke glem feilmeldingene – Flytter de markørens fokus uten at bruker vil det? Kan de lukkes med Esc-tasten?
• Lær deg rammeverket – det kan ha innebygget støtte for tastaturnavigasjon. Finn ut hvilke taster det er som brukes
• Bruk standarder! Brukerne forventer spesiell oppførsel fra Enter, Tab, Mellomrom, PgUp, PgDn osv.

Allment tilgjengelige apps med tastaturnavigasjon:

• Google Reader
• Gmail
• Remember the milk

Mer om tastaturnavigasjon

• W3 validatorens hurtigtaster
• Navigasjon og tilgjengelighet (Engelsk)
• UK Government access keys standard (Engelsk)
• Wikipedia om Access keys (Engelsk)
• Microsoft GUI-standard for tastaturnavigasjon (Anbefales)

Kjenner du til flere applikasjoner som har tatt i bruk tastaturnavigasjon? Del dem med oss i kommentarfeltet. (NB: Fler enn to linker i en kommentar blir tatt av spam-filteret, si i så fall fra dersom den ikke dukker opp så vi kan godkjenne den manuelt).
*****************
Oppdatert: Her er lenke til presentasjonen jeg holdt på Javazone 9/9-2010: Keyboard navigation in web apps is NOT optional (PDF med engelske kommentarer, 2471 KB)

Omlag 70 personer deltok på seminaret om universell utforming som ble avholdt i mars 2009.

På et seminar tidligere denne måneden var en rekke aktører fra det offentlige og det private til stede. Fokus på seminaret var den nye loven om universell utforming. Det var en tankevekker at seminaret ikke var utformet etter retningslinjene for tilgjengelige kurs, møter og konferanser. Blant foredragsholderne var representanter fra Helsedirektoratet, leverandørsiden og brukerperspektivet.

Ny lov om forbud mot diskriminering
Seniorrådgiver Stig Aga Aandstad fortalte om den nye loven om forbud mot diskriminering på grunn av nedsatt funksjonsevne. I loven står det ” “Nye IKT-løsninger […] skal være universelt utformet fra og med 1. juli 2011, men likevel tidligst tolv måneder etter at det foreligger standarder eller retningslinjer for innholdet i plikten. For eksisterende IKT-løsninger gjelder plikten fra 1. januar 2021.” Det ble også reist også en del spørsmål rundt hvordan dette skal forstås. Hva er for eksempel en ny IKT-løsning?

Påvirker statens innkjøp
Frank Fardal fra DIFI fortalte i sitt innlegg hvordan den nye loven vil kunne påvirke statens innkjøp i årene fremover. Det ble påpekt at kompetanseheving blant bestillerne var viktig for at de skal vite hva de skal spørre etter.

Universell utforming gjør målgruppen større
Universell utforming og brukervennlighet er ikke det samme, men er likevel to sider av samme sak. Det er lett å tenke på blinde som målgruppen som skal tilfredsstilles når man snakker om universell utforming. Men, som det flere ganger kom frem på dette seminaret, er universell utforming noe som er til hjelp for en stor gruppe med ulike behov, og som gjør at flere kan benytte seg av de systemene og nettsidene vi utvikler.

Potensial for innovasjon
Fjernkontrollen og enhåndskranen er eksempler på at teknologi som i utgangspunktet ble utviklet for et spesielt formål nå er til nytte for mange. Mulighet for opplesning av tekst som er lagt inn med tanke på blinde kan også være tilnytte for en som kjører bil eller en som har tatt en øyeoperasjon. Det ligger et stort potensial for innovasjon i tilknytning til universell uforming.

Foredrag uten PowerPoint
Dyslektikeren Jonas var den eneste av foredragsholderne som stilte uten PowerPoint-presentasjon. I stedet fortalte han sin historie om møtet med skolen, hvor lang tid det hadde tatt å få de riktige hjelpemidlene og hvor mye han lærte nå som han hadde dem. For flere av dem som satt i salen var mangelen på visuell fremstilling en fordel. En representant fra Blindeforbundet mente at alle foredragsholderne burde stilt uten PowerPoint for at alle tilhørere skulle ha de samme forutsetningene. Videre forklarte han at det ikke var så lett for en blind person å vite hvor kaffen var når den som snakket bare sa ”der oppe”.

Hva er det til lunsj?
I lunsjen var det satt frem tapas av forskjellige slag. En ting som vi seende kanskje ikke tenker så mye over er at det kan være vanskelig for blinde og svaksynte å finne ut hva som står på bordet. En av de svaksynte fikk øye på en hvit lapp med svart skrift som lå på et av fatene. Lappen opplyste om at det som lå på fatet ”inneholder nøtter.” Det kunne med andre ord være alt fra fyrstekake til foccatia med pesto.

Skal vi tenke på alt mulig?
Hvis du jobber med universell uforming er det en trøst at løsninger som lages for å dekke et spesialbehov er til gagn for mange. Er er vanskelig å tenkte på alt. Det er likevel ikke noen unnskyldning for å ikke tenke på universell uforming i det hele tatt. Enten brukeren er fremmedspråklig, allergiker, blind, dyslektiker, håndleddsoperert eller midlertidig ukonsentrert vil universelt utformede løsninger kunne komme til nytte. Det er en vesentlig forskjell på å betrakte universelle løsninger som spesialtilpasning for et mindretall og det å se på det som en mulighet for tilgjengeliggjøring for en større målgruppe. Det unormale er faktisk helt normalt i et inkluderende og universelt uformet samfunn.

Lenker:
Veileder for tilgjengelige møter, kurs og konferanser
Presentasjoner fra seminaret

Finansportalen.no

1. Endre skriftstørrelse gjør ikke som forventet
Jeg er ikke svaksynt, men jeg har en bitteliten PC. Det første som slår meg er at jeg har et behov for større skrift, og klikker på “endre skriftstørrelse” på toppen av siden. Overraskelsen er stor når jeg blir forflyttet til forsiden og klikker gjentatte ganger før jeg innser at utviklerne ikke har sett for seg det scenario at jeg ikke står på forsiden når jeg skal endre skriftstørrelse. Jeg gikk tross alt inn via en link på et annet nettsted og det må være vanskelig å se for seg at noen gjør, eller?
Løsning: Det finnes design patterns for endring av skriftstørrelse. Bruk dem.

2. Tekststøy og dobbel navigasjon forstyrrer meg
Som overskriften sier, så gjentas ordene “bytt” og “bank” til det ekstreme.  Brødsmulestien på toppen av siden forteller meg at jeg befinner meg på “Bank”, og – er det mulig – at jeg kan bytte bank under “bytt bank” siden.

Bytt bank bytt bank bytt bank. Bankbytte?

For å gjøre vondt verre finnes det flere linker til nøyaktig samme side.  Navigasjonen dobles og tredobles dersom man regner med brødsmulestien. En hløsning bør være å fjerne hierarkiet i venstremenyen slik at navigasjonen ligger i hovedsiden eller omvendt, en av dem er unødvendig. Den som lager det vet at linkene er like men vi som bruker det for første gang kan ikke vite det.

Dobbel navigasjon

Løsning: Bruk Steve Krug’s formel for webtekster: Omit needless words. Skriv det du vil si, kutt halvparten og kutt deretter halvparten igjen. Da har du passe lang tekst.

3. Tilgjengelighet via “leseweb” er ufin mot meg
Det er prisverdig å ha en funksjon som leser opp innholdet på siden men den glemmer å nevne at bruker først må markere det som skal leses opp, og deretter trykke “play”. Og når jeg ikke vet det så svarer den med å rope DET ER IKKE MARKERT NOEN TEKST! i et prompt. Å unnskyld kjære system, jeg prøvde bare å bytte bank bank bytte bankbytte, jeg skal aldri gjøre det mer.

Leseweb for svaksynte er slem

Under innstillinger finner jeg også begrepsforvirring, “Min linekapasitet” tolket jeg i all min dårskap til å være hvor mange linjer jeg ville høre på om gangen, eller “takk for at du spør men linjeavstander var helt grei, det er ikke derfor jeg vil ha teksten lest opp”.  Jeg gjør meg litt dum nå men linjekapasitet er et ord vi sjelden benytter.

Min linjekapasitet

Løsning: Bruk kjente begreper.

4.Mistenkelig interaksjon for veiledning og manglende hjelp når jeg trenger det

"ORD OG BEGREPER"

En slik har jeg aldri sett før, men når man plasserer en stor blå klump på siden på denne måten kan man ikke unngå å legge merke til den. Visuelt sett er denne spøkelseskladden svært viktig på siden så en nysgjerrigper som meg må undersøke hva den gjør. Hele alfabetet er representert, det er da noe.  Her kan man klikke på bokstaven, for å se hva kryptiske faguttrykk som Kasko, Kredittkort og Kontofon betyr. Men hva skal jeg med det? Må jeg lese om det før jeg bytter bank med bankbytte? Nei, men den store blå boksen rakk å avlede meg fra min oppgave med å bytte bank med bankbytte før jeg innså at den ikke var til noen hjelp – nå i hvertfall. Men den inneholder også veivisere, hele sider fulle av tekst som avskrekker meg. En av dem kan fortelle om hvordan jeg “sender en henvendelse til en ny bank gjennom bytt bank” – dersom jeg skal bytte bank, naturlig nok.

Nysgjerrigheten fører meg videre – hvor opptrer egentlig alle disse ordene som de som har laget finansportalen tror at brukerne behøver hjelp til?

Hvor er hjelpen når du trenger den?

Aha! I skjemaet for å bytte bank (!) skjuler det seg en skog av bankbegreper. Her fråtser vi i Fastrente, rentetak, mellomfinansiering osv. Men når nøden er som størst, finnes ingen hjelp å få.

Løsning: Unngå svære hjelpeklumper som denne. Sørg for relevant kontekstuell hjelp, som f.eks. på skjema (helt ned på felt-nivå). En sentral inngang til hjelp må også åpne i et eget vindu. Da kan brukerne skrive det ut, ha det åpent mens de jobber med et skjema og du slipper å klikke back 7-8 ganger bare for å finne ut at nettleseren ikke gidder å post’e data på nytt slik at du mister innholdet i skjemaet ditt.

Verden er urettferdig

Det er selvsagt urettferdig av meg å henge ut en enkelt nettside på denne måten. Men verden er urettferdig. Mange nettsider begår slike synder. Jeg ser det hver dag:  Bittesmå avvik fra etablerte design patterns.  Å vasse gjennom en urskog av tekst for å komme til poenget. Ufin oppførsel. Sære begreper og fagguttrykk. Så kanskje ved å statuere et eksempel i ny og ne vil jeg kunne inspirere noen til å gjøre noe med det.

Bytt gjerne bank med bankbytte på finansportalen.no. Tross alt er det en flott tjeneste.

Wenche Løseth

Wenche Løseth er lam og sitter i rullestol etter et hjerneslag. Hun har trent seg opp til å klare å snakke og hun har kontroll på venstre lillefinger. Med den styrer hun alt, både PC og bil. Hun innså at PC ville være et verktøy for at hun igjen kunne ta kontroll over livet sitt. Hun brukte PC for å vise alle at hun ikke hadde glemt alt hun hadde lært til tross for lammelsen. For å komme tilbake til livet etter opptrening og gjenoppta sitt yrkesliv kontaktet hun sin gamle arbeidsgiver. Hun opplevde at de ikke hadde plass og tid til å “ta seg av” en rullestolbruker. (Hun hadde ikke sagt opp eller blitt sagt opp)
Sjefen ville ikke møte henne når hun ville fortelle at hun kunne jobbe, ikke bli passet på. Å henvende seg til AETAT hjalp ikke – de var borte på kurs for de skulle bli NAV.

Hun fant til slutt et firma som ville ha henne men det var vanskelig å få hjelp av det offentlige til å tilrettelegge på arbeidsplassen. Hun fikk til slutt avslag. Til slutt fant en saksbehandler på oppfordring en paragraf som gjorde at hun kunne få hjelp til funksjonsassistanse fra hjelpemiddelsentralen slik at hun kan jobbe. Hun forstår at arbeidsgivere vegrer seg ettersom de blir pålagt ekstrautgifter av det offentlige. Det er ikke inkluderende arbeidsliv, konkluderer hun.

Livet mitt ble ikke snudd opp ned da hun ble lam – Jeg må bare leve det ut i fra en annen situasjon, sier hun.

Hun viser også bilder som viser hvordan hun takler utfordringer i hverdagen nå som hun ikke kan bevege seg. Bla. en “bladvender” som blar i blader og aviser. hun har også en programmerbar seng hvor hun kan bestemme hvordan senga skal snu henne til ulike sovestillinger ila. natten. PC’en styrer hun med en joystick med lillefingeren. Rullestolen har bla. ståfunksjon som gjør at hun kan være mye alene. Rullestolen er mine hender og føtter sier hun. Hun har også en reservestol, om det går en sikring i stolen kommer hun seg ikke på jobb så hun er avhengig av en reserve.

Hun klarer seg størstedelen av døgnet alene uten hjelp, pga alle hjelpemidlene som er tilpasset henne. Dessverre er det slik at tilgjengelighet i ordets rette forstand ikke er en selvfølge. Selv kulturhuset i hjemkommunen som ble bygget i 2007 mangler tilgang for rullestolbrukere. De “glemte” det helt enkelt. hun opplever at hjelpemidler blir tildelt etter et regelverk, ikke etter brukernes behov.

Wenche har gitt ut en bok: Tsunami i kroppen

Kristin Skeide Fuglerud, Norsk Regnesentral

Netlife Research tar bilder som legges ut fortløpende på Flickr.