Få løsningen din mer brukervennlig med tastatur

Forfatter: Saja Andersson

Avdelingsleder og ekspert på universell utforming av ikt

saja@useit.no

Publisert 19 august 2024

Lesetid 13 minutter

Artikkel

Mange digitale brukere med motoriske utfordringer er avhengige av tastatur for å navigere på nettside, apper eller andre digitale løsninger. Noen bruker tastaturet i kombinasjon med sitt hjelpemiddel som skjermleser, mens andre trenger eller foretrekker å bruke tastatur fremfor tradisjonell mus.

At en digital løsning kan brukes fullt ut ved hjelp av tastatur, er en viktig del av universell utforming. Det er også et lovkrav i henhold til forskriften om universell utforming av IKT (informasjons- og kommunikasjonsteknologi), herunder 2.1.1 i WCAG.

Det finnes åtte lovpålagte krav knyttet til tastaturnavigering. Det skal blant annet være:

• Logisk i rekkefølgen når du navigerer (2.4.3),
• du skal ikke sitte fast noe sted (2.1.2),
• det skal være synlig hvilket objekt som er i fokus (2.4.7),
• og det skal være godt synlig (1.4.11).

I tillegg skal det ikke oppstå uventede hendelser når du trykker på ulike taster (2.1.4), eller når et objekt er i fokus (3.2.1), og du skal enkelt komme deg direkte til hovedinnholdet (2.4.1).

Universell utforming handler om mer enn bare lovkrav

Oppfylles disse kravene, anses løsningen for å være universelt utforming i henhold til forskriften med tastatur. Et annet viktig aspekt ved tastaturnavigasjon er at det også representerer andre typer hjelpemidler, for eksempel bryterstyring og/-eller øyestyring. Det vil si at hvis det fungerer med tastaturnavigering, vil det også fungere for de som for eksempel bruker bryterkontroller. Men universell utforming handler om mer enn å oppfylle noen kriterier i en standard. Det å oppfylle lovkravene garanterer ikke at løsningen er brukervennlig, intuitiv eller enkel å bruke.

For å illustrere dette, kan vi sammenligne med en skoleoppgave: En oppgave kan bli godkjent med både karakter E og karakter A, men nivået av kvalitet og innsats som ligger bak, er svært forskjellig. Selv om det ikke er direkte sammenlignbart, viser den poenget med at det er en forskjell når det gjelder å tolke og oppfylle lovkrav i standarden og å levere en løsning som faktisk fungerer godt for brukerne.

Når det gjelder universell utforming av IKT er det viktig å ta hensyn til flere aspekter som kan påvirke «karakteren» løsningen får. Det er generelt bedre å integrere universell utforming tidlig i prosessen, fremfor å forsøke å fikse mangler på et senere tidspunkt. En annen viktig faktor er: Brukeropplevelse (UX).

Noen av dere tenker kanskje: «Vi har allerede et sterkt fokus på UX, så det er ivaretatt». Dette kan absolutt være tilfelle, men gjennom våre mange år med testing har vi fortsatt oppdaget mangler og et behov for bedre brukeropplevelser for dem som benytter ulike hjelpemidler. Som regel er ikke dette utelatt med vilje fra UX-designere, men snarere en mangel på kunnskap og forståelse på dette området.

I denne artikkelen vil jeg derfor løfte frem noen grep du kan ta for å forbedre brukeropplevelsen for de som bruker tastatur som sitt hjelpemiddel.

La meg hoppe over innhold

Hvis dere har innhold før hovedinnholdet (for eksempel en navigasjonsmeny) som gjentas på flere sider i løsningen, skal det ifølge 2.4.1 finnes en mekanisme som lar brukere med tastatur raskt hoppe til hovedinnholdet. Som regel er dette en lenke som blir synlig når den får fokus. Når brukeren aktiverer lenken, flyttes fokus direkte til hovedinnholdet. Tanken bak dette kravet er å hindre at brukere må navigere gjennom de samme objektene om og om igjen på hver side, man tilbyr rett og slett en snarvei.

Dette er et grep som kan benyttes på flere områder. For eksempel, hvis dere har en nettbutikk hvor dere ønsker å fremheve produkter innen ulike kategorier, kan dette ofte gjøres med såkalte bildekaruseller. Brukere som benytter mus, kan enkelt bla gjennom karusellen ved hjelp av pilknapper eller skrolle ned til ønsket kategori.

For brukere med tastatur ser det ofte annerledes ut. De navigerer på nettstedet ved å bruke tabulatortasten (Tab) for å flytte seg fremover og Shift + Tab for å gå bakover. Navigeringen skjer ved at man får fokus på hvert klikkbart objekt, slik som lenker, knapper og lignende.

La oss si at det finnes 5 hovedkategorier på en side, og hver kategori har 10 produkter. Hvert produkt i bildekarusellen er en lenke som leder direkte til produktet. Hvis du ønsker å navigere til den fjerde kategorien, kan det kreve over 30 tastetrykk før du når dem.

Virker dette intuitivt? - Sannsynligvis ikke.

Ville du gitt opp? Sannsynligvis.

Men hva om det fantes en «hopp-over»-mekanisme for hver kategori?

Figur 1. Illustrasjonseksempel fra IKEA sitt nettsted.

Denne gangen trenger du bare å gjøre 6 tastetrykk for å komme deg dit.

Kjenn litt på den forskjellen.

Høres det intuitivt ut? – Mest sannsynligvis.

Det er også viktig å legge til samme mekanisme etter bildekarusellene, hvis brukeren bestemmer seg for å navigere seg bakover på siden. Dette blir som regel bortglemt, og fører da til at brukeren uansett blir tvunget til å navigere seg gjennom alle produktene om de velger å gå tilbake.

Gi meg muligheten til å være mer effektiv

Navigering med kun tastatur kan være tidskrevende. Noen oppgaver kan kreve mange tastetrykk, noe som øker behovet for mer effektive navigeringsmuligheter. En løsning kan være å la tastaturbrukere hoppe over større innholdsområder. En annen effektiv måte er bruk av hurtigtaster. Hurtigtaster er noe mange av oss er vant ved fra før, for eksempel Ctrl/CMD + S for å lagre eller Ctrl/CMD + V for å lime inn.

På en enkel nettside er det kanskje ikke behov for hurtigtaster, men hvis dere har et komplekst layout eller der innholdet i seg selv er komplekst, kan hurtigtaster være en god måte å forenkle og effektivisere navigasjonen på.

La meg illustrere dette med et konkret eksempel. Hos en av våre kunder, Norsk Tipping, kan du tippe på resultater på 12 utvalgte kamper, hvor man kan velge hjemmeseier, borteseier eller uavgjort for flere rekker i én kupong. Tidligere krevde det mange tastetrykk å fylle ut en hel rekke, ettersom det er tre mulige resultater for en kamp.

Figur 2. Illustrasjon av Tipping kupong hos Norsk Tipping.

Vi stilte oss spørsmålet: «Hvordan kan vi gjøre navigasjonen mer effektiv for tastaturbrukere?».

Vi startet først med å gruppere resultatene for hver kamp, ​​slik at brukerne kunne navigere mellom dem ved hjelp av piltastene. Deretter la vi til hurtigtaster for å kunne sette ønsket resultat: H for hjemmesider, B for borteseier og U for uavgjort.

Figur 3. Hele resultatet for hver kamp får visuelt fokus med tastatur.

På denne måten klarte vi å redusere antall tabulator-trykk med mer enn halvparten.

Utfordringer med hurtigtaster

Men det oppstod også andre utfordringer. Å tilby hurtigtaster uten å informere brukerne om dem, ville sannsynligvis føre til at de ikke blir brukt. Et annet problem vi måtte ta hensyn til var å ikke bruke hurtigtaster som kolliderte med skjermlesernes egne kommandoer. Skjermlesere har nemlig mengder av egne hurtigtaster og kommandoer som brukerne er avhengig av.

Vår løsning var å tilby en funksjon som aktiverer denne her navigasjonsmetoden, sammen med en klar beskrivelse av hvordan den fungerer både for tastatur- og skjermleserbrukere.

Figur 4. Beskrivelse av tastaturnavigasjon blir synlig når området får fokus.

Dette er én måte å løse en utfordring på, men det finnes selvfølgelig andre alternativer. Her er det lov å være kreativ, så lenge løsningen er logisk og nyttig i konteksten den brukes i.

Hvis dere vurderer å implementere hurtigtaster i deres løsning, husk følgende:

• Informer brukerne om hurtigtastene, og sørg for at de hvordan de kan bruke dem.
• Unngå konflikter med skjermlesernes egne kommandoer.

Hvis dere bruker hurtigtaster som kun består av ett tegn, er det også et lovkrav at brukerne skal kunne gjøre én av følgende:

1. Skru av hurtigtastene.
2. Omorganisere dem.
3. Sørge for at det bare fungerer når en komponent er i fokus.

Vis tydelig hvor jeg er

For at navigeringen med tastatur skal fungere bra, er det avgjørende at brukere tydelig kan se hvor i løsningen de befinner seg. Ifølge forskriften er det et krav at det skal være en visuelt synlig fokusmarkering når man navigerer med tastatur. Dette vises vanligvis ved en ramme rundt det objektet som er i fokus. I henhold til 1.4.11 i WCAG 2.1, skal det også være tilstrekkelig kontrast mellom fargen på rammen og omkringliggende farger (minimum 3:1). Hvordan den rammen vises, avhenger midlertid både av nettleserinnstillinger og hvordan vi selv utformer den.

Dessverre er det ofte vi ser at fokusmarkeringen enten ikke er synlig, eller ikke synlig nok. Dette kan føre til at brukere som navigerer med tastatur, blir nødt til å telle antall tabulatortrykk for å vite hvor de befinner seg, noe som kan sammenlignes med å navigere i blinde.

De fleste klikkbare objekter har en standard fokusmarkering i de vanligste nettleserne. For eksempel ser fokusmarkeringen i Firefox slik ut:

I nettleseren Safari kan det se slik ut:

I Safari er fargen på fokusmarkeringen akkurat innenfor minimumskravet på 3:1 mot den hvite bakgrunnsfargen. Men utfordringen oppstår når nettsiden inneholder deler med mørkere bakgrunn.

Med andre ord så vil fokusmarkeringen i løsningen deres variere mellom nettlesere dersom dere stoler på standardinnstillingene, og det er ikke alltid at dette blir godt nok.

Ta kontroll selv!

Vi anbefaler alltid at dere selv definerer hvordan fokusmarkeringen skal se ut. Det er først da dere kan sikre at den fungerer godt for alle brukere, uavhengig hva for slags nettleser eller lignende brukerne bruker. Dette forutsetter selvfølgelig at dere tar ansvar for å designe en tydelig fokusmarkering. Vi ser dessverre ofte tilfeller hvor det er laget en egen fokusmarkering, men hvor endringen er så minimal at den i praksis blir ubrukelig. Se eksempel nedenfor:

I realiteten, blir dette rett og slett ubrukelig.

Tidligere har mange designeres argument vært at fokusmarkeringen ødelegger designet, men vi er ikke enige i dette. Ved å bruke: focus-visible i CSS, kan fokusmarkeringen kun vises for de som trenger det.

Med andre ord, det finnes ingen unnskyldning for å ikke gjøre fokusmarkeringen godt synlig.

Ikke la meg gjette hvor jeg er

I praksis kan et digitalt grensesnitt ha flere ulike typer fokusmarkeringer som oppfyller kontrastkravene, og det er i utgangspunkt ikke et brudd på noen lovkrav å bruke forskjellige fokusmarkeringer. Det betyr at dere for eksempel kan ha en ramme rundt ett objekt, en endret bakgrunnsfarge på et annet, og en understrek på det tredje, og så videre.

Men spørsmålet du som designer bør stille deg er: Vil dette gjøre det lettere eller vanskeligere for brukeren å se hvor de befinner seg?

Begrepene «enkelt» og «intuitivt» er sentrale designprinsipper, både generelt og spesielt innen universell utforming. En viktig del av dette er konsistens. Det innebærer at like elementer plasseres på samme sted, eller beskrives likt når de har samme funksjon. Konsistens gjør at brukerne ikke trenger å tenke på eller tolke alle deler av innholdet – de vet allerede hvordan det fungerer, eller kan lett forstå det gjennom designets konsistent. Dette gjør brukeropplevelsen enklere og mer intuitivt.

Samme tankesett kan vi også applisere når den gjelder den visuelle fokusmarkeringen. Hvis du alltid vet hva du ser etter, blir det lettere å finne og følge rekkefølgen. Men hvis fokusmarkeringen plutselig endres til noe mindre fremtredende: Ja, da vil det være vanskeligere å oppdage markeringen.

Så, hva ønsker jeg at dere skal ta med dere fra denne artikkelen? Vel, for å få gode karakterer i universell utforming, må du tenke utover lovkravene. Fortsett å være kreativ, men hold designet enkelt og konsistent. Og sist, men ikke minst: La oss lage god UX for alle!