Effektivare navigering för många

För många år sedan hjälpte jag Storstockholms Länstrafik (SL) med deras reseplanerare och arbetade även med det (då helt nya) webbgränssnitt som SL:s kundtjänst använde. Kundtjänst innebär de personer som svarar på frågor om resvägar, tider och störningsinformation på telefon. Det gränssnittet skiljer sig avsevärt från det som vanliga resenärer ser, och framför allt är det enormt snabbjobbat. Det som gör det snabbjobbat är alla snabbkommandon via tangentbordet som kundtjänstpersonalen kan använda sig av för att snabbt hoppa mellan olika sökfält, samt exempelvis välja färdvägar och färdmedel.

Kundtjänstpersonalen ger oss ett tydligt exempel på situationella behov, snarare än permanenta behov.

En viktig aspekt av att möjjliggöra webbnavigering via tangentbordet är att det inte bara handlar om att tillgodose de som inte kan använda en mus eller styrplatta, utan många människor använder det för att snabba på sina aktiviteter, framför allt i formulär. Det tillåter också att man enkelt kan integrera ytterligare mjukvara eller hårdvara som kan simulera kombinationer av knapptryckningar, för att förenkla eller effektivisera navigering.

Nivå A

Kriterierna i WCAG om åtkomst via tangentbord säger så här:

  • 2.1.1 All funktionalitet i innehållet går att kontrollera med ett tangentbord utan krav på specifik tajming av enstaka knapptryckningar. För att uppnå nivå AAA har denna regel inga undantag. Det enda undantaget som finns för nivå A är om det krävs en speciell rörelse som följer en viss bana (som att signera sitt namn). Det finns ingen nivå AA för denna riktlinje.

Nivå A (den lägsta nivån) innehåller även följande grundläggande krav:

  • 2.1.2 Ingen tangentbordsfälla: Om fokus kan förflyttas till en komponent på sidan med tangentbordet så kan fokus också förflyttas från den komponenten, och, om det kräver mer än pilar, tab-tangenter eller andra standardiserade exit-metoder, så förklaras för användaren hur han/hon ska göra.

Här tycker jag tyvärr att författarna av WCAG gör det lite för lätt för sig eftersom det inte finns en specifikation av vad som är ett standardiserat sätt att förflytta fokus från en komponent på sidan.

Faktum är dock att den som använder sig av standardiserad HTML-kod sällan behöver bekymra sig om denna riktlinje som säger att allt ska vara åtkomligt via tangentbordet, eftersom vanliga länkar och formulärfält alltid är det. Det fungerar som så att användaren använder tab-tangenten för att förflytta sig framåt i sidan mellan klickbara och ifyllningsbara element. Med det sagt är det viktigt att ändå alltid kontrollera att sidan har den förväntade strukturen, eftersom absolut positionering och ”flytande” element kan innebära att ordningen i sidan inte är den du visuellt ser framför dig.

För A-nivån finns nu även sedan version 2.1 detta kriterium (som tyvärr gör att numreringen av detta och nästa kriterium blir omkastade).

  • 2.1.4 Genvägar med teckentangenter. Om en tangentbords-genväg har implementerats med endast bokstav (gemen eller versal), siffra eller symboltecken så är minst en av dessa kriterier uppfyllda:
    • Avstängning. Det finns möjlighet att stänga av genvägen.
    • Om-mappning. Det finns möjlighet att mappa om genvägen så att den använder en eller flera icke-skrivbara tecken (exempelvis: Ctrl, Alt, och så vidare).
    • Endast aktiv vid fokus. Genvägen för en komponent är endast aktiv när den komponenten har fokus.

Nivå AAA

För den högsta nivån av uppfyllnad av riktlinje 2.1 gäller även:

  • 2.1.3 Det finns inga undantag när det gäller att all funktionalitet måste gå att styra med hjälpa av tangentbordet utan krav på särskild tid under, eller mellan, tangent-tryckningarna.

Vanliga fallgropar

De vanligaste problemen när det gäller att tillåta navigering via tangentbordet är när vi har interaktiva element i sidan som uppför sig lite oförskämt.

  • Lightbox / Modala fönster – En lightbox är ett virtuellt fönster som öppnar sig så att det visuellt ligger ovanför det övriga innehållet och presenterar helt nytt innehåll, vare sig det är en bild, formulär, text eller audiovisuellt innehåll. Det viktiga att tillgodose är (1) att tab-ordningen (förflyttandet i sidan med tab-tangenten) sker i rätt ordning inuti denna lightbox, (2) att det inte går att tabba sig utanför rutan utan att först stänga den och (3) att det enkelt går att stänga rutan, företrädesvis med Esc-tangenten, eller annars med en tydligt markerad länk inuti rutan.
  • Kalender – Om du har inmatning av datum och en så kallad popup-kalender för att lätt välja i en kalender så måste det gå att navigera i kalendern med tangentbordet och förstå vilken dag det är man väljer. Ett annat sätt är att inte tillåta öppning av popup-kalendern via tangentbordet (göra den osynlig för tangentbordet, vilket alltså är möjligt) och ändå tillgodose behovet av att mata in datum genom att tillåta det via vanlig nummerinmatning.
  • Video – Om det går att tabba sig till en video och starta den så måste det också gå att kontrollera uppspelningen av den via tangentbordet, samt lämna och gå vidare från videon.
  • Oönskade fokusförflyttningar – Det är inte ofta jag stöter på det men det händer att någon välvilligt implementerar formulär där markören flyttar sig från ett fält till ett annat utan att användaren begärt det. Ett typiskt exempel är inmatning av kreditkortsnummer där man delat upp det hela i 4 fält, och markören hoppar vidare så fort man skrivit in 4 siffror i ett fält. Tyvärr skapar detta en hel del förvirring och gör det dessutom svårt att korrigera när man skrivit fel. Ett gränssnitt ska inte på eget bevåg göra saker som användaren inte bett om.
  • Kreativa formulär – Det finns en mängd varianter av kreativa formulär, där så kallade ”sliders” blivit populära, där man alltså drar en markör längs en mätare för att indikera längd, vikt eller annat mått. Dessa måste också gå att kontrollera via tangentbordet, ibland genom att komplettera med ett inmatningsformulär. En annan variant är kartor som används för att markera orter; på samma sätt så måste det gå att välja orter via tangentbordet och inte bara med musen.

Ju mer kreativ du blir desto mer utmanande blir det alltså att uppfylla denna riktlinje. Det bästa sättet att arbeta är genom progressive enhancement, vilket kan översättas med gradvisa förbättringar. Utgå från det enkla, standardiserade sättet till att börja med, och lägg sedan till funktionalitet som skapar mer lustfylldhet och visuellt stöd. Målet är att det alltid ska fungera nästan oavsett hur föråldrad webbläsare någon kan tänkas ha.

Och du, det är väldigt lätt att testa. Släpp musen eller styrplattan en stund och försök göra allt på sidan med hjälp av tangentbordet. Det är enkelt testmoment som hjälper dig att skapa framtidssäkra, effektiva och tillgängliga webbplatser.