Skip to content
Holm Digital
Alla inlägg

WCAG 2.2: de nya touch-kraven på mobilen

av Karin Holm

En tumme siktar mot en mobilskärm med två knappar, den ena för liten att träffa säkert och den andra tillräckligt stor, en bild av WCAG 2.2:s krav på klickytans storlek.

De flesta tänker på tillgänglighet som något man testar på datorn, med tangentbord och skärmläsare. Men de allra flesta som besöker din sajt gör det med tummen på en telefon. Och i WCAG 2.2 finns två krav som handlar om precis det: att kunna träffa och styra saker med fingret.

WCAG 2.2 är den senaste versionen av riktlinjerna och lägger till nio nya kriterier jämfört med 2.1. Två av dem riktar in sig på touch, och de fångar fel som inte syns alls när man testar med mus och tangentbord.

Krav 1: klickytan måste vara minst 24 pixlar (2.5.8 Target Size)

Det första kravet, 2.5.8 Target Size (Minimum), säger att klickbara ytor (knappar, länkar, ikoner, formulärkontroller) ska vara minst 24 gånger 24 pixlar, eller ha minst 24 pixlars fritt avstånd till närmaste annan klickyta.

Det viktiga är att det är den faktiska träffytan som räknas, inte hur stor ikonen ser ut. En soptunneikon som ser ut att vara 16 pixlar kan ha en osynlig träffyta på 24 pixlar runt sig, och då är kravet uppfyllt. Omvänt failar en visuellt stor knapp om dess verkliga klickyta är liten.

Det finns undantag: länkar inuti löpande text, kontroller vars storlek webbläsaren själv bestämmer, och fall där en likvärdig kontroll av rätt storlek finns någon annanstans på samma sida.

I praktiken är det här de oftast fälls:

  • Ikonknappar som stäng-kryss, hamburgermeny och delningsikoner med klickyta under 24 pixlar.
  • Pagineringssiffror och brödsmulor som ligger för tätt, utan 24 pixlars luft emellan.
  • Små växlingsreglage och kryssrutor i formulär, särskilt i kompakta tabeller.
  • Länkar staplade på varandra i sidfot och menyer utan tillräckligt radavstånd.

Det fina är att det ofta går att rätta utan att designen ändras visuellt. Behåll den lilla ikonen, men utöka träffytan med padding, eller lämna minst 24 pixlars luft runt om. Det kallas spacing-undantaget och räddar de flesta små ikoner.

Krav 2: allt som dras måste också gå att klicka (2.5.7 Dragging Movements)

Det andra kravet, 2.5.7 Dragging Movements, säger att allt som går att göra med en dragrörelse också måste gå att göra med en enkel pekaråtgärd, till exempel ett klick eller tryck. Undantaget gäller när dragrörelsen är nödvändig för funktionen, som när man ritar fritt eller drar något till en valfri plats.

En prisslider som dras ska alltså också gå att styra med klickbara plus- och minusknappar, eller genom att klicka på spårets position. En karta som bara går att panorera genom att dras behöver klickbara zoom- och positionsknappar. En sorterbar lista där man drar rader behöver upp- och nedknappar som alternativ.

Det här är en av de mer osynliga barriärerna. Den syns inte i en automatisk skanning, och den drabbar tyst alla som inte kan dra precist: personer med darrhänthet eller nedsatt finmotorik, och de som styr med tangentbord, switch eller huvudpekare. Just därför är det lätt att missa och lätt att råka skeppa.

Är det här lagkrav?

Nej, inte än, och det vill vi vara raka med. Den juridiska golvnivån i Sverige är fortfarande WCAG 2.1 nivå AA, via EN 301 549 V3.2.1, som är den version som refereras i EU:s officiella tidning. De här två kriterierna tillhör WCAG 2.2 och blir formellt lagkrav först när nästa version av EN 301 549 (V4.x) refereras där.

Men två saker gör dem värda att ta på allvar redan nu. Det första är att de är billiga att rätta och slår direkt mot mobilanvändning, alltså mot de allra flesta av dina besökare. En liten knapp som missas kostar dig ofta ett avslut, för besökaren avbryter hellre än försöker igen.

Det andra är riktningen. Tillgänglighetsdirektivet (EAA) omfattar både webbplatser och appar, och kraven börjar prövas i domstol. I juni 2026 fick Carrefour i Frankrike sex månader på sig att göra både webbplats och app fullt tillgängliga, och deras försvar att de redan klarade 71 procent höll inte. Vi har skrivit om det i Fransk domstol: Carrefour måste bli fullt tillgängligt. När V4.x väl blir gällande är det de här kriterierna som tillkommer.

Så testar du din egen mobil

Av de två kriterierna är det bara 2.5.8 Target Size som går att hitta automatiskt. Vår skanner fångar det, och det är ofta första gången en kund ser "WCAG 2.2" dyka upp i en rapport. 2.5.7 Dragging Movements kräver manuell kontroll, för ingen automatisk skanner ser den.

Vill du testa snabbt själv, börja här:

  • Öppna sajten i telefonen och försök träffa varje ikon och liten knapp med tummen, utan att zooma. Missar du, eller träffar du grannen, är ytan troligen för liten.
  • Leta upp allt som går att dra: sliders, kartor, bildjämförare, carouseller, sorterbara listor. Fråga dig om varje sådan sak också går att klicka. Om inte, failar den 2.5.7.

Vad du kan göra nu

Det säkraste sättet att veta var du står är en aktuell mätning mot kraven, i stället för en gammal rapport eller en magkänsla av att det nog är okej. En tillgänglighetsanalys pekar ut exakt vilka klickytor som är för små och var de juridiskt tunga bristerna finns. Behöver du hjälp att tolka resultatet och prioritera rätt finns vår rådgivning där.

Att fixa touch-kraven nu är billigt. Att vänta tills de blir lag, och tills någon annan upptäcker bristerna åt dig, är det inte.

Vill du veta hur din mobil står sig? Börja med en tillgänglighetsanalys.

Källor

WCAG 2.2, Understanding Success Criterion 2.5.8 Target Size (Minimum): W3C.

WCAG 2.2, Understanding Success Criterion 2.5.7 Dragging Movements: W3C.