Tangentbordsnavigering och synligt fokus — vad kräver WCAG?
En betydande del av webbens användare navigerar utan mus: personer med motoriska funktionsnedsättningar, skärmläsaranvändare — och vana användare som föredrar tangentbordet för att det är snabbare. WCAG ställer därför en rad krav: allt interaktivt ska gå att nå med tangentbord, fokus får aldrig fastna, ordningen ska vara logisk och det ska alltid synas var man är. Det är krav som inte syns i en skärmdump — de visar sig först när någon faktiskt tabbar genom sidan.
Vad kräver WCAG?
Fem kriterier bär huvudansvaret:
- 2.1.1 Tangentbord (nivå A) — all funktionalitet ska gå att använda med enbart tangentbord. Menyer, formulär, modaler, datumväljare: kan det klickas ska det kunna tabbas.
- 2.1.2 Ingen tangentbordsfälla (nivå A) — fokus får aldrig fastna i ett element som inte går att lämna med tangentbordet. En modal som fångar fokus utan väg ut låser hela sidan för den som inte har mus.
- 2.4.3 Fokusordning (nivå A) — tabbordningen ska vara logisk, normalt samma som den visuella ordningen. Fokus som hoppar kors och tvärs gör sidan obegriplig.
- 2.4.7 Synligt fokus (nivå AA) — det ska synas vilket element som har fokus. Utan synlig markering navigerar tangentbordsanvändaren i blindo.
- 2.4.11 Fokus inte skymt (nivå AA, ny i WCAG 2.2) — det fokuserade elementet får inte döljas helt av fasta toppmenyer, banners eller andra lager som ligger ovanpå sidan.
Vem omfattas?
Kriterierna ingår i den europeiska standarden EN 301 549, som DOS-lagen (lagen om tillgänglighet till digital offentlig service) kräver av offentlig sektor. Sedan den 28 juni 2025 gäller samma nivå även privata aktörer som omfattas av EU:s tillgänglighetsdirektiv genom tillgänglighetslagen (2023:254) — bland annat e-handel, banktjänster, persontransporter och elektronisk kommunikation. Kärnan är tjänster till konsumenter; ren B2B omfattas inte.
Vanliga brister vi ser
- Klickbara element byggda av div eller span utan tangentbordsstöd — de ser ut som knappar men går varken att nå eller aktivera med tangentbord.
- Fokusramen bortstylad med outline: none — ofta för att designern tyckte ramen var ful — utan att någon ersättning lagts in.
- Modaler och cookiebanners som fångar fokus utan väg ut, eller tvärtom släpper igenom fokus till sidan bakom.
- Tabbordning som följer kodordningen i stället för den visuella — fokus hoppar mellan spalter och sektioner.
- Fasta toppmenyer som täcker det fokuserade elementet — du står på en länk men ser den inte.
- Flöden som fungerar på desktop men bryter i mobilvy, där menyer och komponenter byter beteende.
Så testar CompliantHQ det här
Det här går inte att avgöra genom att bara läsa sidans kod — det måste upplevas. I vår fördjupade svit, som ingår i betalplanerna, tabbar skannern genom sidorna med ett riktigt tangentbord i en riktig webbläsare och mäter: nås allt interaktivt, fastnar fokus någonstans, är ordningen logisk, syns fokusmarkeringen, och skyms det fokuserade elementet av fasta lager.
Allt körs dessutom om i mobilvy, eftersom menyer och komponenter ofta byter beteende där — en meny som fungerar perfekt på desktop kan vara en fälla i mobilen.
Så åtgärdar du
- Använd riktiga interaktiva element — button, a, input — i stället för klickbara div:ar. Då följer tangentbordsstödet med på köpet.
- Ta aldrig bort fokusramen utan att ersätta den med en tydligare egen markering — outline: none utan ersättning fäller 2.4.7 direkt.
- Se till att modaler går att stänga med Escape och att fokus återvänder till elementet som öppnade dem.
- Låt tabbordningen följa den visuella ordningen — undvik positiva tabindex-värden och låt dokumentordningen styra.
- Ge sidan scroll-marginal under fasta toppmenyer (till exempel med scroll-padding), så att fokuserade element hamnar nedanför menyn i stället för bakom den.
- Testa själv: lägg undan musen och ta dig genom sidans viktigaste flöde med Tab, Skift+Tab och Enter.
Det här ingår i granskningen
- Att allt interaktivt på sidan går att nå med enbart tangentbord.
- Att tangentbordsfokus aldrig fastnar i ett element det inte går att lämna.
- Att fokusordningen är logisk när man tabbar genom sidan.
- Att det syns var tangentbordsfokus befinner sig.
- Att fokuserade element inte döljs bakom fasta toppmenyer eller banners.
WCAG-kriterier som omfattas
- 2.1.1 Tangentbord — allt på sidan ska gå att använda med enbart tangentbord, eftersom många inte kan använda mus — t.ex. personer med motoriska nedsättningar eller synnedsättning. (A)
- 2.1.2 Ingen tangentbordsfälla — den som navigerar med tangentbord får aldrig fastna i en del av sidan (t.ex. en popup) utan möjlighet att ta sig vidare eller tillbaka. (A)
- 2.4.3 Fokusordning — när man tabbar genom sidan ska markeringen röra sig i en begriplig ordning, inte hoppa kors och tvärs över sidan. (A)
- 2.4.7 Synligt fokus — när man tabbar genom sidan måste det synas var man befinner sig, t.ex. med en tydlig ram runt det markerade elementet. (AA)
- 2.4.11 Fokus inte skymt (minimum) — det element man tabbat till får inte ligga dolt bakom en fast meny eller cookie-banner, så att man navigerar i blindo. (AA)
Vanliga frågor
Hur testar jag tangentbordsnavigering själv?
Lägg undan musen och tabba genom sidan: når du allt interaktivt, ser du alltid var du är, kommer du bakåt med Skift+Tab, och kan du slutföra det viktigaste flödet — till exempel ett köp eller ett formulär — utan att fastna?
Är det tillåtet att ta bort fokusramen med CSS?
Bara om du ersätter den med en egen, tydligt synlig markering. outline: none utan ersättning gör att sidan inte uppfyller WCAG 2.4.7 — då finns inget som visar var fokus är.
Vad är en tangentbordsfälla?
Ett element som fokus kan ta sig in i men inte ut ur med tangentbordet — ofta en modal, en inbäddad widget eller en tredjepartsspelare. För användaren utan mus är det ett stopp för hela besöket.
Vad är nytt i WCAG 2.2 kring fokus?
Kriteriet 2.4.11: elementet som har fokus får inte döljas helt av fasta lager som toppmenyer och banners. Det fångar ett vanligt problem som tidigare WCAG-versioner inte täckte — fokus finns och syns, men ligger bakom menyn.
Vill du se vad vi hittar på din webbplats?
Kör en gratis skanning — alla fyra moduler ingår i 30 dagar, inget betalkort krävs.