Gör din tjänst mer användarvänlig med tangentbordsnavigering
Författare: Saja Andersson
Avdelningschef och tillgänglighetsexpert
saja@useit.no
Lästid 13 minuter
ArtikelMånga användare med motoriska nedsättningar är beroende av tangentbord för att navigera på webbplatser, appar eller andra digitala lösningar. Vissa använder tangentbordet i kombination med sina hjälpmedel som skärmläsare, medan andra behöver eller föredrar att använda tangentbord i stället för en mus.
Att en digital tjänst kan användas fullt ut med hjälp av tangentbord är en viktig del av universell utformning. Det är också ett lagkrav enligt lag (2018:1937) om tillgänglighet till digital offentlig service (DOS-lagen).
Det finns åtta lagstadgade krav relaterade till tangentbordsnavigering. Bland annat ska det vara:
- Logiskt i ordningen när du navigerar (2.4.3)
- Du ska inte fastna någonstans (2.1.2)
- Det ska vara synligt vilket objekt som är i fokus (2.4.7)
- Och det ska vara väl synligt (1.4.11)
Dessutom ska det inte uppstå oväntade händelser när du trycker på olika tangenter (2.1.4) eller när ett objekt är i fokus (3.2.1), och du ska enkelt kunna komma direkt till huvudinnehållet (2.4.1).
Universell utformning handlar om mer än bara lagkrav
Om dessa krav uppfylls anses tjänsten vara universellt utformad enligt föreskrifterna med tangentbord. En annan viktig aspekt av tangentbordsnavigering är att det också representerar andra typer av hjälpmedel, till exempel styrning med brytare eller ögonstyrning. Det innebär att om det fungerar med tangentbordsnavigering, kommer det också att fungera för de som till exempel använder brytarstyrning. Men universell utformning handlar om mer än att uppfylla några kriterier i en standard. Att uppfylla lagkraven garanterar inte att tjänsten är användarvänlig, intuitiv eller enkel att använda.
För att illustrera detta kan vi jämföra med en skoluppgift: En uppgift kan bli godkänd med både betyg E och betyg A, men kvaliteten och ansträngningen som ligger bakom är väldigt olika. Även om det inte är direkt jämförbart visar det poängen med att det är en skillnad när det gäller att tolka och uppfylla lagkrav i standarden och att leverera en lösning som faktiskt fungerar bra för användarna.
När det gäller universell utformning av ikt är det viktigt att ta hänsyn till flera aspekter som kan påverka "betyget" tjänsten får. Det är generellt bättre att integrera universell utformning tidigt i processen, snarare än att försöka åtgärda brister i efterhand. En annan viktig faktor är användarupplevelse (UX).
Några av er kanske tänker: "Vi har redan ett starkt fokus på UX, så det är uppfyllt". Det kan absolut vara fallet, men genom våra många år av tester har vi fortfarande upptäckt brister och ett behov av bättre användarupplevelser för dem som använder olika hjälpmedel. Oftast är detta inte medvetet uteslutet av UX-designers, utan snarare en brist på kunskap och förståelse inom detta område.
I den här artikeln vill jag därför lyfta fram några åtgärder du kan ta för att förbättra användarupplevelsen för de som använder tangentbord som sitt hjälpmedel.
Låt mig hoppa över innehåll
Om ni har interaktivt innehåll före huvudinnehållet (till exempel en navigeringsmeny) som upprepas på flera sidor i tjänsten, ska det enligt 2.4.1 finnas en mekanism som låter användare med tangentbord snabbt hoppa till huvudinnehållet. Vanligtvis är detta en länk som blir synlig när den får fokus. När användaren aktiverar länken flyttas fokus direkt till huvudinnehållet. Tanken bakom detta krav är att förhindra att användare måste navigera genom samma objekt om och om igen på varje sida, man erbjuder helt enkelt en genväg.
Detta är en åtgärd som kan användas på flera områden. Till exempel, om ni har en webbshop där ni vill framhäva produkter inom olika kategorier, kan detta ofta göras med så kallade bildkaruseller. Användare som använder mus kan enkelt bläddra igenom karusellen med hjälp av piltangenter eller skrolla ner till önskad kategori.
För användare med tangentbord ser det ofta annorlunda ut. De navigerar på webbplatsen genom att använda tab-tangenten (Tab) för att flytta sig framåt och Shift + Tab för att gå bakåt. Navigeringen sker genom att man får fokus på varje klickbart objekt, såsom länkar, knappar och liknande.
Låt oss säga att det finns fem huvudkategorier på en sida och varje kategori har tio produkter. Varje produkt i bildkarusellen är en länk som leder direkt till produkten. Om du vill navigera till den fjärde kategorin kan det kräva över 30 tangenttryckningar innan du når den.
Verkar detta intuitivt? - Förmodligen inte.
Skulle du ge upp? Förmodligen.
Men vad händer om det fanns en "hoppa över"-mekanism för varje kategori?
Den här gången behöver du bara göra sex tangenttryckningar för att komma dit.
Känn på den skillnaden.
Låter det intuitivt? - Troligtvis.
Det är också viktigt att lägga till samma mekanism efter bildkarusellerna, om användaren bestämmer sig för att navigera bakåt på sidan. Detta glöms ofta bort, och leder då till att användaren ändå tvingas navigera sig genom alla produkter om de väljer att gå tillbaka.
Ge mig möjlighet att vara mer effektiv
Navigering med endast tangentbord kan vara tidskrävande. Vissa uppgifter kan kräva många tangenttryckningar, vilket ökar behovet av mer effektiva navigeringsmöjligheter. En lösning kan vara att låta tangentbordsanvändare hoppa över större innehållsområden. Ett annat effektivt sätt är att använda snabbkommandon. Snabbkommandon är något många av oss är vana vid, till exempel Ctrl/CMD + S för att spara eller Ctrl/CMD + V för att klistra in.
På en enkel webbplats är det kanske inte behov av snabbkommandon, men om ni har en komplex layout eller där innehållet i sig är komplext, kan snabbkommandon vara ett bra sätt att förenkla och effektivisera navigeringen på.
Låt mig illustrera detta med ett konkret exempel. Hos en av våra kunder, Norsk Tipping, kan du tippa på resultat för 12 utvalda matcher, där man kan välja hemmaseger, bortaseger eller oavgjort för flera rader i en kupong. Tidigare krävdes det många tangenttryckningar för att fylla i en hel rad, eftersom det är tre möjliga resultat för en match.
Vi ställde oss frågan: "Hur kan vi göra navigeringen mer effektiv för tangentbordsanvändare?"
Vi började med att gruppera resultaten för varje match, så att användarna kunde navigera mellan dem med hjälp av piltangenterna. Sedan lade vi till snabbkommandon för att kunna sätta önskat resultat: H för hemmaseger, B för bortaseger och U för oavgjort (motsvarande 1, X, 2 i Sverige).
På detta sätt lyckades vi minska antalet tabbsteg med mer än hälften.
Utmaningar med snabbkommandon
Men det uppstod också andra utmaningar. Att erbjuda snabbkommandon utan att informera användarna om dem, skulle sannolikt leda till att de inte används. Ett annat problem vi var tvungna att ta hänsyn till var att inte använda snabbkommandon som kolliderade med skärmläsarnas egna kommandon. Skärmläsare har nämligen mängder av egna snabbkommandon och kommandon som användarna är beroende av.
Vår lösning var att erbjuda en funktion som aktiverar denna navigeringsmetod, tillsammans med en tydlig beskrivning av hur den fungerar både för tangentbords- och skärmläsaranvändare.
Detta är ett sätt att lösa en utmaning, men det finns naturligtvis andra alternativ. Här är det tillåtet att vara kreativ, så länge lösningen är logisk och användbar i den kontext den används i.
Om ni överväger att implementera snabbkommandon i er lösning, kom ihåg följande:
- Informera användarna om snabbkommandona, och se till att de vet hur de kan använda dem.
- Undvik konflikter med skärmläsarnas egna kommandon.
- Om ni använder snabbkommandon som skärmläsaren använder, testa med olika skärmläsare.
Om ni använder snabbkommandon som endast består av ett tecken, är det också ett lagkrav att användarna ska kunna göra en av följande:
- Stänga av snabbkommandona.
- Omorganisera dem.
- Se till att de bara fungerar när en komponent är i fokus.
Visa tydligt var jag är
För att navigering med tangentbord ska fungera bra är det avgörande att användare tydligt kan se var de befinner sig i tjänsten. Enligt föreskrifterna är det ett krav att det ska finnas en visuellt synlig fokusmarkering när man navigerar med tangentbord. Detta visas vanligtvis genom en ram runt objektet som är i fokus. Enligt 1.4.11 i WCAG 2.1 ska det även vara tillräcklig kontrast mellan färgen på ramen och de omkringliggande färgerna (minst 3:1). Hur ramen visas beror både på webbläsarens inställningar och hur vi själva utformar den.
Tyvärr ser vi ofta att fokusmarkeringen antingen inte är synlig, eller inte synlig nog. Detta kan leda till att användare som navigerar med tangentbord måste räkna antalet tabbtangentstryck för att veta var de befinner sig, vilket kan jämföras med att navigera i blindo.
De flesta klickbara objekt har en standard fokusmarkering i de vanligaste webbläsarna. Till exempel ser fokusmarkeringen i Firefox ut så här:
I webbläsaren Safari kan det se ut så här:
I Safari är färgen på fokusmarkeringen precis inom det minimikravet på 3:1 mot den vita bakgrundsfärgen. Men utmaningen uppstår när webbplatsen innehåller delar med mörkare bakgrund.
Med andra ord, fokusmarkeringen i er lösning kommer att variera mellan webbläsare om ni bara förlitar er på standardinställningarna, och det är inte alltid tillräckligt.
Ta kontroll själv!
Enligt EN 11.7 ska användare bland annat kunna bestämma själva hur fokusmarkören ser ut. Detta öppnar förstås upp för att fler användare kan anpassa efter egna visuella, kognitiva eller personliga behov. Smidigt, eller hur?
Men det finns en hake. Dels känner inte alla till den här inställningen, och om bakgrunden eller färgen på klickbara saker ändras kan fokusmarkören ibland bli svår att se, eftersom den får för lite kontrast. Då behöver vi som designers ta kontrollen själva.
Dessutom är det inte alla webbläsare som låter användare ändra fokusmarkören än. Så vad gör vi?
Här är vårt tips:
- Använd webbläsarens inbyggda fokusmarkering – så länge den syns bra och har minst 3:1 i kontrast.
- Om det inte räcker – gör en egen fokusmarkering.
Kom ihåg: När ni gör er egen, se till att den syns ordentligt! Tyvärr ser vi ofta fall där en egen fokusmarkering har skapats, men där förändringen är så minimal att den i praktiken blir oanvändbar.
Tidigare har många designers argumenterat att fokusmarkeringen förstör designen, men vi håller inte med om det. Genom att använda focus-visible i CSS kan fokusmarkeringen endast visas för de som behöver den.
Med andra ord, det finns ingen ursäkt för att inte göra fokusmarkeringen tydlig.
Låt mig inte gissa var jag är
I praktiken kan ett digitalt gränssnitt ha flera olika typer av fokusmarkeringar som uppfyller kontrastkraven, och det är inte i sig ett brott mot några lagkrav att använda olika fokusmarkeringar. Det betyder att ni till exempel kan ha en ram runt ett objekt, en ändrad bakgrundsfärg på ett annat, och en understrykning på ett tredje, och så vidare.
Men frågan som du som designer bör ställa dig är: Kommer detta göra det lättare eller svårare för användaren att se var de befinner sig?
Begreppen "enkelt" och "intuitivt" är centrala designprinciper, både generellt och särskilt inom universell utformning. Det är viktigt att vara konsekvent. Det innebär att lika element placeras på samma ställe eller beskrivs på samma sätt när de har samma funktion. Konsekvens gör att användarna inte behöver tänka på eller tolka alla delar av innehållet – de vet redan hur det fungerar, eller kan lätt förstå det genom designens konsekvens. Detta gör användarupplevelsen enklare och mer intuitiv.
Samma tänkesätt kan vi också applicera när det gäller den visuella fokusmarkeringen. Om du alltid vet vad du letar efter, blir det lättare att hitta och följa ordningen. Men om fokusmarkeringen plötsligt ändras till något mindre framträdande: Ja, då blir det svårare att upptäcka markeringen.
Så, vad vill jag att ni ska ta med er från den här artikeln? För att få bra betyg i universell utformning måste du tänka utanför lagkraven. Fortsätt vara kreativ, men håll designen enkel och konsekvent. Och sist men inte minst: Låt oss skapa bra UX för alla!
