Den ultimata WCAG 2.2 checklistan för utvecklare (AA & AAA)

WCAG (Web Content Accessibility Guidelines) är bibeln för digital tillgänglighet. Men låt oss vara ärliga – den officiella dokumentationen ä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.

Vi går igenom varje nytt kriterium med konkreta kodexempel och praktiska lösningar du kan implementera direkt.

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 ytterligare.

2.4.11 Focus Not Obscured (AA): Nya kravet som säger att fokuserat element inte får vara helt skymt. Det vanligaste problemet? Sticky headers och cookie-banners som lägger sig över fokuserade element.

Lösning i CSS:

html { scroll-padding-top: 80px; } – Säkerställer att ankarlänkar och fokus tar hänsyn till headerhöjden.

För fokusringens utseende, följ dessa tumregler:

Tumregel: Om du inte kan se fokusmarkeringen direkt när du tabbar genom sidan, har du ett problem.

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 tillräckligt med luft runt den så att den totala ytan inkluderar 24px avstånd till nästa klickbara element.

Undantag:

Xrayd rekommenderar: Nöj dig inte med 24px. Apple och Google rekommenderar 44x44px för touch-targets. Det är bättre UX för alla. Se till att padding i dina CSS-knappar är tillräcklig:

.btn { min-height: 44px; min-width: 44px; padding: 12px 24px; }

Redundant inmatning (Redundant Entry)

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.

Vanliga fall:

Lösningar:

Detta minskar inte bara friktionen – det ökar konverteringen markant. Win-win.

Rörelsebaserade gester (Dragging Movements)

2.5.7 Dragging Movements (AA) är nytt och viktigt. Om din applikation har drag-and-drop-funktionalitet måste det finnas ett alternativ som inte kräver dragning.

Exempel som behöver alternativ:

Implementeringstips:

Det alternativa sättet behöver inte vara lika elegant som drag-and-drop. Det viktiga är att funktionen är tillgänglig.

Praktiska implementeringstips

1. Autentisering (3.3.8)

Lösenordskrav är okej, men erbjud alternativ: 'Logga in med BankID', 'Skicka inloggningslänk till e-post', eller password managers (se till att autocomplete='current-password' är satt).

2. Testa med riktiga användare

WCAG 2.2:s fokus på kognitiva nedsättningar är svårt att testa automatiskt. Överväg användartester med personer som har dyslexi, ADHD, eller minnessvårigheter.

3. Bygg in från start

Det är 10x dyrare att fixa tillgänglighet i efterhand. Lägg till WCAG 2.2-kriterier i er Definition of Done nu.

4. Prioritera rätt

Nivå A-kriterier först (de är grundläggande), sedan AA (lagkravet), sedan AAA (bonus). 2.2 lade till flera A-kriterier som bör fixas omgående.