Varför tangentbordsnavigering är avgörande
Tangentbordsnavigering är en av grundpelarna i webbtillgänglighet. Det handlar inte bara om personer som inte kan använda mus – tangentbordsnavigering används också av:
- Skärmläsaranvändare som navigerar med tangentbord i kombination med hjälpmedelsprogram
- Personer med motoriska funktionsnedsättningar som använder alternativa inmatningsenheter (switch-kontroller, munstyrning) som emulerar tangentbordsinput
- Avancerade datoranvändare som föredrar tangentbordet för effektivitet
- Personer med tillfälliga begränsningar – en bruten arm, en musplatta som inte fungerar
WCAG 2.1 har flera framgångskriterier som rör tangentbordsanvändning, varav de viktigaste är:
- 2.1.1 Tangentbord (nivå A) – All funktionalitet ska vara tillgänglig via tangentbord
- 2.1.2 Ingen tangentbordsfälla (nivå A) – Användaren ska aldrig fastna i ett element
- 2.4.3 Fokusordning (nivå A) – Fokusordningen ska vara logisk och meningsfull
- 2.4.7 Synligt fokus (nivå AA) – Det ska vara synligt vilket element som har fokus
Grunderna: tangenter du bör känna till
| Tangent | Funktion |
|---|---|
| Tab | Flytta fokus till nästa interaktiva element |
| Shift + Tab | Flytta fokus bakåt |
| Enter | Aktivera länk eller knapp |
| Mellanslag | Aktivera knapp, kryssa i kryssruta |
| Piltangenter | Navigera inom menyer, radioknappar, flikar |
| Escape | Stäng modal, dropdown eller popup |
De vanligaste problemen
1. Icke-interaktiva element som borde vara interaktiva
Ett <div> med en klickhändelse (onClick) ser ut som en knapp men kan inte nås med tangentbord. Skärmläsare ser det inte heller som en knapp. Lösning: använd <button> istället för <div>, eller lägg till tabindex="0", role="button" och en onKeyDown-hanterare. Det förstnämnda är alltid att föredra.
2. Fokus som försvinner
Användaren tabbar genom sidan och plötsligt verkar fokus försvinna. Det beror ofta på att fokus hamnar på ett element som inte är synligt – ett gömt menyalternativ, ett element utanför viewport eller ett element med opacity: 0.
Lösning: se till att dolda element inte finns i tab-ordningen. Använd display: none eller visibility: hidden (som tar bort elementet från fokusordningen) istället för opacity: 0 eller att flytta elementet utanför skärmen.
3. Tangentbordsfällor
En tangentbordsfälla uppstår när användaren tabbar in i ett element men inte kan tabba ut. Vanligast i:
- Inbäddade kartor (Google Maps) som fångar Tab-tangenten
- Rich text-editorer som tolkar Tab som indrag
- Videouppspelare med egen tangentbordshantering
Lösning: se till att Escape alltid fungerar som en utväg. För inbäddade widgets, överväg att låta användaren välja att aktivera widgeten (exempelvis med Enter) innan den fångar fokus.
4. Fokusordning som inte matchar visuell ordning
CSS kan placera element visuellt i en annan ordning än de har i HTML. Exempelvis kan order i flexbox eller grid ändra visuell placering utan att ändra tab-ordningen. Det skapar förvirring när fokus hoppar till oväntade platser.
Lösning: matcha den visuella ordningen med DOM-ordningen. Undvik att använda CSS-ordning för att omplacera interaktiva element.
5. Avsaknad av "hoppa till innehåll"-länk
Utan en "hoppa till innehåll"-länk (skip link) måste tangentbordsanvändare tabba genom hela navigeringen på varje sidladdning innan de når huvudinnehållet. På en webbplats med 20 menyalternativ innebär det 20 Tab-tryckningar.
Lösning: lägg en visuellt dold länk som första element i <body> som pekar på <main>. Länken visas vid fokus.
Så testar du tangentbordsnavigering
- Lägg undan musen – Stäng av eller flytta undan musen fysiskt för att inte frestas använda den
- Börja från toppen – Tryck Tab och börja navigera från sidans början
- Kontrollera varje interaktivt element – Kan du nå det? Aktivera det? Lämna det?
- Testa alla tillstånd – Öppna menyer, modaler, formulär. Kan du stänga dem med Escape?
- Kontrollera fokusindikatorn – Ser du alltid var fokus befinner sig?
- Jämför med musupplevelsen – Allt som fungerar med mus ska fungera med tangentbord
Snabbguide: rätt HTML-element
Innan du lägger till ARIA-attribut och JavaScript, kontrollera att du använder rätt HTML-element:
- Klickbar åtgärd →
<button> - Navigation till annan sida →
<a href="..."> - Formulärinmatning →
<input>,<select>,<textarea> - Val bland alternativ →
<input type="radio">,<input type="checkbox">
Semantisk HTML ger tangentbordstillgänglighet, fokushantering och skärmläsarstöd utan extra kod. Det är alltid det bästa förstahandsvalet.