Tangentbord och synligt fokus i webbutiken: testa och rätta

16 oktober 2026

Så testar du tangentbordsnavigering i din webbutik på fem minuter och rättar de vanliga felen: borttagen fokusram, hovringsmenyer och klickbara rutor.

Det här är teknisk vägledning och inte juridisk rådgivning. För tolkningsfrågor om tillgänglighetslagen, vänd dig till Post- och telestyrelsen (PTS).

Många webbutiker går att använda med mus och ändå inte med tangentbord. Menyn öppnas bara när pekaren hålls över den, knappen "Köp" är egentligen en ruta med ett klickkommando, och ingen vet var på sidan markören befinner sig, eftersom designern tog bort ramen runt den. Här går vi igenom vad kraven säger, hur du testar din egen butik på fem minuter och hur de vanligaste felen rättas.

Vem som använder tangentbordet

Tangentbordet är inte bara ett val för den som tycker det går snabbare. Den som använder skärmläsare navigerar med tangenter. Den som har skakiga händer, nedsatt rörelseförmåga eller en skada i armen kan ha svårt att sikta med en mus. Vissa styr datorn med en enda strömbrytare eller med röststyrning som i grunden trycker på samma tangenter. För alla dessa gäller att det som går att göra med musen också ska gå att göra med tangentbordet.

Fem kriterier i WCAG handlar om detta. Namnen nedan är hämtade från W3C:s svenska översättning av WCAG 2.0. Den finns bara för 2.0, men kriterierna har samma nummer och namn i 2.1.

2.1.1 Tangentbord: all funktionalitet ska kunna användas med tangentbord.
2.1.2 Ingen tangentbordsfälla: om fokus kan flyttas in i en komponent ska det också gå att flytta ut igen med tangentbord.
2.4.1 Hoppa över grupperat innehåll: det ska finnas ett sätt att hoppa förbi innehåll som upprepas på varje sida, till exempel menyn.
2.4.3 Fokusordning: fokus ska röra sig i en ordning som följer sidans mening och användning.
2.4.7 Synligt fokus: det ska alltid gå att se vilket element som har tangentbordsfokus.

Testet på fem minuter

Lägg undan musen. Börja på startsidan och gå igenom en vanlig köpresa: startsida, meny, sökfält, en produktsida, varukorg och kassa. Du behöver bara fem tangenter.

Tab flyttar fokus framåt och Skift+Tab bakåt.
Enter aktiverar länkar och knappar. Mellanslag aktiverar knappar och kryssrutor.
Esc stänger dialoger och menyer.
Piltangenterna flyttar mellan alternativ i listor, flikar och radioknappar.

Titta på tre saker vid varje tryck.

Syns det var fokus är? Det ska finnas en tydlig ram eller markering på varje länk, knapp och fält. Tappar du bort markören är det ett fel.
Går ordningen att förstå? Fokus ska gå från vänster till höger och uppifrån och ned, ungefär som du läser. Hoppar det mellan sidhuvud och sidfot, eller in i något som ligger bakom en öppen ruta, är ordningen fel.
Går det att ta sig loss? Du ska alltid kunna lämna en meny, ruta eller karusell med Tab, Skift+Tab eller Esc.

Gör också ett särskilt test av det första du möter: trycker du på Tab en gång efter att sidan laddats bör du få en länk "Hoppa till huvudinnehållet" som tar dig förbi menyn. Saknas den måste en tangentbordsanvändare tabba sig genom hela menyn på varje sida.

De vanliga felen och hur de rättas

Fokusramen är borttagen

Det vanligaste felet är en rad i CSS som ser harmlös ut:

a:focus, button:focus { outline: none; }

Raden gör att ingen ser var fokus är. Ta bort den, eller ersätt den med en egen markering som bara visas för den som navigerar med tangentbord:

:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

Pseudoklassen :focus-visible låter webbläsaren avgöra när markeringen behövs. Vid musklick visas den oftast inte, vid tangentbordsnavigering gör den det. Välj en färg som syns mot bakgrunden: kriterium 1.4.11 i WCAG 2.1 kräver minst 3:1 kontrast för det som behövs för att se en komponent och dess tillstånd, till exempel fokusmarkeringen.

Menyer som bara öppnas vid hovring

Många megamenyer visar undermenyn när musen ligger över rubriken. Med tangentbord blir undersidorna då omöjliga att nå. Gör rubriken till en knapp som öppnar och stänger menyn med Enter, och låt Esc stänga den och flytta tillbaka fokus till knappen.

Klickbara rutor utan tangentbordsstöd

Ett vanligt mönster är ett div-element med ett klickkommando:

<div class="lagg-till" onclick="laggIVarukorg()">Köp</div>

Det går inte att nå med Tab och inte att aktivera med Enter. Använd i stället en riktig knapp, som får både fokus och tangentbordsstöd utan extra kod:

<button type="button" class="lagg-till" onclick="laggIVarukorg()">Köp</button>

Om du av någon anledning måste behålla ett div-element behöver det role="button", tabindex="0" och kod som reagerar på både Enter och mellanslag. Det är betydligt mer arbete än att byta tagg.

Cookierutor och dialoger som håller fast fokus

En dialog som är öppen ska hålla fokus inom sig, och det är rätt. Felet är när den inte går att stänga med tangentbord, eller när fokus ändå fortsätter ut till sidan bakom. Elementet dialog i HTML med anropet showModal() hanterar båda delarna, och Esc stänger det som standard. Se till att fokus hamnar på knappen som öppnade dialogen när den stängs.

Karuseller och kampanjbanners

Roterande banners som flyttar fokus av sig själva, eller som har pilar som bara går att klicka på med mus, är ett problem för både tangentbords- och skärmläsaranvändare. Ge pilarna riktiga knappar, låt användaren pausa rörelsen och flytta aldrig fokus automatiskt.

Fokus som hoppar efter att varukorgen uppdaterats

När en vara läggs i korgen byggs ofta en minikorg eller ett meddelande upp med JavaScript. Om elementet som hade fokus byts ut tappar användaren sin plats och fokus hamnar överst på sidan. Flytta fokus till det nya innehållet med focus(), eller använd en region med role="status" som läser upp bekräftelsen utan att flytta fokus.

Vad som går att kontrollera automatiskt

Ett automatiskt verktyg som läser sidans källkod hittar vissa av de här felen men inte alla. Det kan se att ett element saknar tabindex eller att en knapp saknar namn. Det ser däremot inte om fokusramen faktiskt syns, om ordningen blir rimlig eller om fokus fastnar, eftersom det kräver att någon trycker på tangenterna i en körande sida.

AccessAudits gratis test läser källkoden på upp till fem sidor och kontrollerar inte tangentbord eller synlig fokus. Månadsgranskningen kör butiken i en riktig webbläsare och trycker sig igenom sidan med Tab. Den kontrollerar att varje element som får fokus visar en markering, att fokus inte fastnar inom 40 tabbtryck och att element som går att klicka på också går att nå med tangentbord. Hur ordningen känns och om en flerstegsdialog fungerar på riktigt avgörs fortfarande bäst av en människa, så granskningen ersätter inte ditt eget test.

Börja här

Gör fem-minuterstestet på startsidan och i kassan innan du gör något annat. Rätta först det som hindrar ett köp, alltså kassan och knappen "Lägg i varukorg", och sedan fokusramen, som oftast går att fixa med en enda CSS-regel.

AccessAudits gratis test på butik.nightwave.se/tillganglighet kontrollerar upp till fem sidor i källkoden. I checklistan finns de kontroller du kan göra själv. Vill du ha löpande kontroll av tangentbord, fokus och resten av butiken finns ett abonnemang för 1 990 kr per månad exklusive moms för upp till 30 sidor. Det är teknisk granskning mot WCAG, inte juridisk rådgivning.