WCAG 2.2 i praktiken: kriterierna, misstagen och checklistan

Webbtillgänglighet har gått från trevlig ambition till skarpt affärskrav. Sedan EU:s tillgänglighetsdirektiv (European Accessibility Act) blev svensk lag och började tillämpas den 28 juni 2025, behöver de flesta som säljer eller informerar digitalt kunna visa att deras tjänster fungerar för personer med funktionsnedsättning. Den tekniska ribban är WCAG – Web Content Accessibility Guidelines – och den aktuella versionen är WCAG 2.2, publicerad som W3C-rekommendation den 5 oktober 2023.

Den här guiden är skriven för dig som faktiskt ska bygga eller beställa en tillgänglig webbplats. Vi går igenom hur WCAG hänger ihop, vilka kriterier som väger tyngst, vad WCAG 2.2 tillförde, de misstag vi ser om och om igen – och en checklista du kan agera på direkt.

Så är WCAG uppbyggt: POUR och tre nivåer

WCAG vilar på fyra principer som brukar förkortas POUR: innehåll ska vara Perceivable (möjligt att uppfatta), Operable (hanterbart), Understandable (begripligt) och Robust (robust, dvs. fungera med olika tekniker och hjälpmedel). Under principerna ligger riktlinjer, och under dem de konkreta framgångskriterierna som faktiskt går att testa.

Varje kriterium har en nivå: A (grundläggande), AA (det normala målet) eller AAA (högsta ambition). I praktiken är AA den nivå nästan alla siktar på – det är också den nivå som den europeiska standarden EN 301 549 och tillgänglighetslagstiftningen utgår från. AAA är sällan ett rimligt heltäckande krav, men enskilda AAA-kriterier kan vara värda att uppfylla där de gör stor skillnad.

En viktig egenskap: WCAG 2.2 är bakåtkompatibelt. Uppfyller du 2.2 på en nivå uppfyller du också 2.1 och 2.0 på samma nivå. Du behöver alltså inte välja mellan versionerna – 2.2 är den som gäller framåt.

De viktigaste framgångskriterierna i praktiken

Det finns dussintals kriterier, men en handfull står för en oproportionerligt stor del av den verkliga skillnaden för användare. Börja här.

Textalternativ och kontrast (Perceivable)

• 1.1.1 Icke-text-innehåll (A): alla bilder, ikoner och grafik som bär betydelse behöver ett textalternativ. Rent dekorativa bilder ska istället döljas för skärmläsare med tom alt-text.
• 1.4.3 Kontrast (minimum) (AA): vanlig text behöver ett kontrastförhållande på minst 4,5:1 mot bakgrunden, stor text minst 3:1. Detta är ett av de oftast underkända kriterierna.
• 1.4.11 Kontrast för icke-text (AA): även knappar, formulärfältens kanter och fokusmarkeringar behöver minst 3:1 i kontrast – inte bara brödtexten.

Tangentbord och navigation (Operable)

• 2.1.1 Tangentbord (A): allt som går att göra med mus ska gå att göra med enbart tangentbord. Inga fällor där fokus fastnar.
• 2.4.7 Synligt fokus (AA): det ska alltid synas var tangentbordsfokus befinner sig. Att ta bort fokusringen med CSS utan ersättning är ett klassiskt och allvarligt fel.
• 2.4.3 Fokusordning (A): tabb-ordningen ska följa en logisk, begriplig sekvens som matchar den visuella layouten.

Begriplighet och formulär (Understandable)

• 3.3.1 Identifiera fel (A) och 3.3.2 Etiketter eller instruktioner (A): formulärfält ska ha tydliga, programmässigt kopplade etiketter, och fel ska beskrivas i text – inte bara med röd färg.
• 3.2.3/3.2.4 Konsekvent navigation och identifiering (AA): återkommande element ska ligga och bete sig likadant på olika sidor.

Vad WCAG 2.2 tillförde: nio nya kriterier

WCAG 2.2 lade till nio nya framgångskriterier (två på nivå A, fyra på AA och tre på AAA) och tog samtidigt bort det gamla kriteriet 4.1.1 Parsing, som blivit överflödigt eftersom moderna webbläsare och hjälpmedel hanterar trasig HTML-markup på egen hand. De nya kriterierna fokuserar på motorik, kognition, låg synskärpa och autentisering. Dessa är värda särskild uppmärksamhet eftersom de ofta missas i äldre tillgänglighetsarbeten:

• 2.4.11 Fokus inte dolt (minimum) (AA): när ett element får tangentbordsfokus får det inte vara helt dolt bakom t.ex. en sticky-header eller en cookie-banner.
• 2.5.7 Dragrörelser (A): funktioner som bygger på att dra (sliders, kartor, drag-and-drop) måste ha ett enklare alternativ med en enda pekåtgärd, t.ex. knappar.
• 2.5.8 Storlek på mål (minimum) (AA): klickytor ska vara minst 24×24 CSS-pixlar, eller ha tillräckligt avstånd till intilliggande mål. Viktigt för små länkar och tätt packade ikoner.
• 3.2.6 Konsekvent hjälp (A): hjälpfunktioner (kontaktlänk, chatt, telefonnummer) som återkommer ska ligga i samma relativa ordning på alla sidor.
• 3.3.7 Upprepad inmatning (A): information användaren redan angett i ett flöde ska inte behöva matas in igen – fyll i automatiskt eller låt den väljas.
• 3.3.8 Tillgänglig autentisering (minimum) (AA): inloggning får inte kräva ett kognitivt minnestest. Tillåt t.ex. inklistring av lösenord, lösenordshanterare eller en länk via e-post i stället för svårlösta pussel.

De tre nya AAA-kriterierna är 2.4.12 Fokus inte dolt (förbättrad), 2.4.13 Fokusutseende (krav på fokusmarkeringens storlek och kontrast) samt 3.3.9 Tillgänglig autentisering (förbättrad).

De vanligaste misstagen

Efter många granskningar är mönstret tydligt. Det är sällan exotiska problem som fäller en webbplats – det är samma återkommande grundfel:

• För låg kontrast. Ljusgrå text på vit bakgrund och dekorativa "designfärger" på knappar är det enskilt vanligaste underkännandet.
• Borttagen fokusmarkering. outline: none i CSS utan en ersättande, synlig fokusstil gör webbplatsen oanvändbar för tangentbordsanvändare.
• Bilder utan vettig alt-text – antingen helt saknad, eller meningslös som "bild1.jpg", eller tvärtom alt-text på rent dekorativa bilder som då skräpar ner skärmläsarupplevelsen.
• Formulär utan kopplade etiketter. Platshållartext (placeholder) är inte en etikett – den försvinner när man börjar skriva och har ofta för låg kontrast.
• Fel som bara signaleras med färg. Ett rött fält säger ingenting till den som inte ser rött; felet måste också beskrivas i text.
• Klickbara "div:ar" i stället för riktiga knappar och länkar. Det bryter mot både tangentbords- och robusthetskrav eftersom hjälpmedel inte förstår vad elementet är.
• Felaktig rubrikstruktur. Rubriknivåer (h1–h6) som används för utseende i stället för hierarki gör att skärmläsaranvändare tappar översikten.
• Övertro på överlägg. Automatiska "tillgänglighetswidgetar" löser inte underliggande kodproblem och kan i värsta fall störa hjälpmedel. De ersätter aldrig faktiskt tillgänglig kod.

Konkret checklista för en tillgänglig webbplats

Använd den här listan som ett praktiskt avstamp mot nivå AA. Den ersätter inte en full granskning, men fångar det mesta som verkligen betyder något:

• Struktur: en h1 per sida, logisk rubrikhierarki, semantiska element (nav, main, header, footer) och tydliga landmärken.
• Tangentbord: navigera hela sajten med enbart Tab, Enter och piltangenter. Kontrollera att fokus alltid syns och aldrig fastnar.
• Fokus och 2.2: säkerställ att fokuserade element inte döljs av sticky-element eller banners (2.4.11) och att fokusmarkeringen har god kontrast.
• Kontrast: mät text (4,5:1), stor text (3:1) och gränssnittskomponenter (3:1). Testa även hover- och fokustillstånd.
• Bilder och media: meningsfull alt-text på informativa bilder, tom alt på dekorativa, undertexter på video och transkript på ljud.
• Formulär: synliga etiketter kopplade med for/id, beskrivande felmeddelanden i text, och inga obligatoriska upprepningar av redan angiven data (3.3.7).
• Klickytor: minst 24×24 px för knappar, ikoner och länkar i tät layout (2.5.8), och pekaralternativ till alla dragrörelser (2.5.7).
• Inloggning: tillåt lösenordshanterare och inklistring; undvik CAPTCHA som kräver minne eller komplex tolkning (3.3.8).
• Innehåll: klarspråk, beskrivande länktexter (inte "klicka här") och konsekvent placerad hjälp på alla sidor (3.2.6).
• Verktyg och människor: komplettera automatiska tester (t.ex. axe eller Lighthouse) med manuell tangentbordstestning och, helst, test med riktiga skärmläsaranvändare. Automatik fångar bara en mindre del av problemen.

Kopplingen till lagen – kort

EU:s tillgänglighetsdirektiv omsattes i Sverige genom lagen om vissa produkters och tjänsters tillgänglighet, som tillämpas sedan den 28 juni 2025. Den berör bland annat e-handel, banktjänster, e-böcker och digitala konsumenttjänster, medan de minsta mikroföretagen för tjänster är undantagna. Den praktiska tolkningen av kraven sker via den europeiska standarden EN 301 549, som i sin nuvarande harmoniserade form pekar på WCAG nivå AA. En kommande revision av EN 301 549 väntas referera till WCAG 2.2, och eftersom 2.2 är bakåtkompatibelt är det redan i dag det förnuftiga målet att bygga mot. Att jobba mot WCAG 2.2 AA är alltså både framtidssäkert och i linje med lagens andemening – men exakt vad som krävs i ert fall beror på vilken typ av tjänst ni driver och vilka undantag som kan gälla.

Sammanfattning

Tillgänglighet är till sist inte en checklista man bockar av en gång, utan ett kvalitetsarbete man bygger in i design, kod och innehåll. Det som vinner mest är ofta de minst glamorösa sakerna: tillräcklig kontrast, synligt fokus, riktiga knappar, kopplade etiketter och klarspråk. Får du dessa rätt har du både nöjdare användare och en webbplats som står stadigt mot kraven.

Vill ni veta var er befintliga webbplats står – eller bygga en ny med tillgänglighet inbyggt från start – hjälper ZORC er med allt från granskning till färdig lösning. Beskriv ert projekt i vår offertkalkylator så återkommer vi med ett konkret upplägg, eller hör av er via kontakt.