Tangentbordsnavigering

Vad är tangentbordsnavigering?

Tangentbordsnavigering innebär att kunna använda alla delar av en webbplats med enbart tangentbordet — ingen mus, styrplatta eller pekskärm behövs. En fullt tangentbordstillgänglig webbplats låter användare nå alla länkar, knappar, formulär, menyer och anpassade kontroller med standardtangenter.^[1]

Vem är beroende av tangentbordsnavigering?

Tre huvudgrupper förlitar sig på tangentbordsåtkomst:

• Personer med motoriska funktionsnedsättningar — Det inkluderar personer med förlamning, tremor, belastningsskador eller saknade lemmar. Många använder switchar eller munpinnar som skickar tangentbordssignaler.
• Skärmläsaranvändare — Alla stora skärmläsare är beroende av tangentbordet för att navigera sidor och använda kontroller.
• Avancerade användare — Utvecklare, dataregistrerare och andra som arbetar snabbare med tangenter än med mus.

För organisationer med välbesökta webbplatser — myndighetsportaler, bankplattformar, offertverktyg för försäkring — är tangentbordsåtkomst ingen nischfunktion. Det är ett krav som berör en betydande del av besökarna.

Vilka är standardtangenterna?

Webbanvändare förväntar sig konsekvent tangentbordsbeteende:

• Tab — Flyttar fokus framåt genom länkar, knappar och formulärfält
• Shift + Tab — Flyttar fokus bakåt
• Enter — Aktiverar länkar och knappar
• Mellanslag — Växlar kryssrutor, aktiverar knappar och rullar sidan
• Piltangenter — Navigerar inom komponenter som rullgardinsmenyer, flikpaneler och radiogrupper
• Escape — Stänger dialoger och menyer och flyttar fokus tillbaka till utlösarelementet

Dessa mönster dokumenteras i W3C:s ARIA Authoring Practices Guide (APG), som ger testade tangentbordsbeteenden för vanliga widgetar.^[2]

Vad kräver WCAG för tangentbordsåtkomst?

WCAG har flera regler med fokus på tangentbordet:

• 2.1.1 Tangentbord (nivå A) — All funktionalitet måste fungera med tangentbord. Det här är en av de mest bristfälligt uppfyllda WCAG-reglerna.
• 2.1.2 Ingen tangentbordsfälla (nivå A) — Användare får aldrig fastna i en komponent utan att kunna ta sig ut med tangentbordet.
• 2.4.3 Fokusordning (nivå A) — Ordningen som fokus flyttas i måste vara logisk.
• 2.4.7 Fokus synligt (nivå AA) — Användare måste kunna se vilket element som har fokus.
• 2.4.11 Fokusutseende (nivå AA, WCAG 2.2) — Fokusindikatorer måste uppfylla minimikrav på storlek och kontrast.^[1]

Juridiska team bör notera att tangentbordsåtkomst börjar på nivå A — det mest grundläggande kravet. En webbplats som inte klarar tangentbordsåtkomst kan inte hävda någon nivå av WCAG-efterlevnad.

Vad är fokushantering?

När en modal dialog öppnas ska fokus flytta in i dialogen. När den stängs ska fokus gå tillbaka till knappen som öppnade den. När en ensidesapplikation laddar nytt innehåll ska fokus flytta till det nya innehållet så att tangentbordsanvändare vet att något ändrats.^[3]

Bristande fokushantering är en av de allvarligaste tillgänglighetsbristerna i moderna webbappar. Användare tappar bort sig, missar innehåll eller hamnar i interaktion med element som är dolda bakom ett överlägg.

IT-team som bygger med React, Vue eller Angular bör behandla fokushantering som en grundläggande utvecklingsuppgift, inte en eftertanke.

Vilka är de vanligaste tangentbordsfelen?

Dessa problem dyker upp i revision efter revision:

• Mushändelser utan tangentbordsmotsvarighet — Klick- eller hover-hanterare utan tangentbordsalternativ. Kontrollen fungerar med mus men gör ingenting när tangentbordsanvändare trycker Enter.
• Dolda fokusindikatorer — CSS som outline: none tar bort webbläsarens standardfokusring utan att lägga till en ersättning. Tangentbordsanvändare tappar bort var de befinner sig.
• Tangentbordsfällor — En modal eller videospelare fångar Tab-tangenten utan att erbjuda Escape som utväg.
• Fel tabbordning — CSS ändrar den visuella ordningen, men den underliggande HTML-koden behåller den gamla ordningen. Fokus hoppar i oväntade riktningar.
• Icke-fokuserbara kontroller — Interaktiva element byggda med <div> eller <span> utan tabindex="0" och tangentbordshanterare. Tangentbordsanvändare kan inte nå dem alls.

För stora innehållstunga webbplatser — som myndighetsinformation eller universitetskurskataloger — kan dessa brister blockera tusentals användare från viktiga uppgifter.

Så hjälper Askem

För stora organisationer med många sidor och komponenter är automatisk detektion det enda realistiska sättet att fånga tangentbordstillgänglighetsbrister i stor skala. Kontinuerlig skanning flaggar problem som saknade fokusindikatorer, element som inte går att nå med Tab och interaktiva kontroller utan tangentbordsstöd. Verktyg som Askem upptäcker dessa problem när en malländring eller ny komponent introducerar dem, och varnar teamet istället för att låta det vänta till en användare eller en årlig tillgänglighetsrevision hittar dem.

Källor

1. W3C — WCAG 2.2 Guideline 2.1 Keyboard Accessible: https://www.w3.org/TR/WCAG22/#keyboard-accessible
2. W3C WAI — ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/patterns/
3. W3C WAI — Keyboard Compatibility: https://www.w3.org/WAI/perspective-videos/keyboard/