Teknik
Den ultimata WCAG 2.2 checklistan för utvecklare (AA & AAA)
Sarah Dev
Lead Frontend
Lästid
15 min
Publicerad
24 nov. 2025
WCAG (Web Content Accessibility Guidelines) är bibeln för tillgänglighet. Men låt oss vara ärliga – den är tungläst. Därför har vi brutit ner de viktigaste delarna av den senaste versionen, WCAG 2.2, till en praktisk checklista för dig som kodar.
WCAG 2.2 ersätter inte 2.1, utan bygger vidare på den. Den stora skillnaden är fokuset på användare med kognitiva nedsättningar och mobila gränssnitt. Om du siktar på nivå AA (vilket lagen kräver) är detta vad du behöver veta.
Vad är nytt i WCAG 2.2?
Version 2.2 introducerade 9 nya framgångskriterier. De viktigaste för vanliga webbplatser är:
Fokusmarkering (Focus Appearance)
Att ta bort webbläsarens standardfokus (outline: none) är en dödssynd inom tillgänglighet om du inte ersätter det med något bättre. I WCAG 2.2 skärps kraven.
För att vara säker, följ denna tumregel:
fixed header inte lägger sig över länkar när man tabbar sig neråt på sidan (använd scroll-padding-top i CSS).Klickytor (Target Size)
För användare med motoriska nedsättningar, eller bara stora fingrar på en skakig buss, är små knappar frustrerande.
WCAG 2.5.8 (AA) kräver att klickytan är minst 24x24 CSS-pixlar. Om knappen är mindre än så, måste det finnas luft runt den så att den totala ytan blir 24px.
Xrayd rekommenderar: Nöj dig inte med 24px. Apple och Google rekommenderar 44x44px. Det är bättre UX för alla. Se till att padding i dina CSS-knappar är tillräcklig.
Redundant inmatning (Redundant Entry)
Detta kriterium (3.3.7) handlar om kognitiv belastning. Om en användare redan angett sin adress i ett tidigare steg, be dem inte skriva den igen.
Lösning: Implementera en checkbox: 'Samma som leveransadress', eller fyll i fälten automatiskt (auto-populate). Detta minskar friktionen i kassan drastiskt och ökar konverteringen.
Koden är grunden. Använd Xrayd för att skanna din kodbas efter brott mot WCAG 2.2 automatiskt.
