WCAG 2.2 AA: checklista för tillgänglighet i webbutiker

WCAG 2.2 AA-checklista för Shopify- och WooCommerce-butiker per sidtyp: alt-text, kontrast, etiketter, tangentbord, fokus, målstorlek och nya kriterier.

FixReports redaktion10 min läsning

En checklista för WCAG 2.2 AA i en webbutik börjar med de fel som finns i de flesta butiksmallar: saknad alternativtext, text med låg kontrast, länkar och knappar utan tillgängligt namn, formulärfält utan etikett, tangentbordsfällor och osynligt fokus. WCAG 2.2 lägger sedan till AA-kontroller som slår hårt mot butiker: fokuserade element som döljs under fasta fält (2.4.11), tryckytor som är mindre än 24 × 24 CSS-pixlar (2.5.8) och inloggningar som kräver att man kommer ihåg eller skriver av något (3.3.8). Testa varje sidtyp (startsida, kollektion, produkt, varukorg) med tangentbordet och ett automatiskt testverktyg, och åtgärda sedan temats mallar så att varje sida får med sig rättelsen.

Viktiga punkter

  • WCAG 2.2 blev W3C-rekommendation den 5 oktober 2023. Den aktuella utgåvan är daterad 12 december 2024 och har godkänts som ISO/IEC 40500:2025 (öppnas i en ny flik).
  • I WebAIM Million 2026 (öppnas i en ny flik) (data från februari 2026) hade 95,9 % av startsidorna bland de en miljon största webbplatserna upptäckbara WCAG 2-fel.
  • De sex vanligaste felen var text med låg kontrast (83,9 % av sidorna), saknad alternativtext (53,1 %), saknade formuläretiketter (51 %), tomma länkar (46,3 %), tomma knappar (30,6 %) och saknad angivelse av sidans språk (13,5 %).
  • De 42 516 Shopify-startsidorna i urvalet hade i genomsnitt 75,1 upptäckta fel, jämfört med 56,1 för alla sidor.
  • WCAG 2.2 lägger till fyra AA-kriterier (2.4.11, 2.5.7, 2.5.8, 3.3.8) och två kriterier på nivå A (3.2.6, 3.3.7) och tar bort 4.1.1 Parsing.

Vad har ändrats i WCAG 2.2 för webbutiker?

WCAG 2.2 lade till nio framgångskriterier, varav sex på nivå A eller AA, och tog bort 4.1.1 Parsing som föråldrat (W3C WAI (öppnas i en ny flik)).

Nytt kriteriumNivåVad det innebär för en butik
2.4.11 Focus Not Obscured (Minimum)AAEn fokuserad länk eller knapp får inte döljas helt av ett fast sidhuvud, ett fast fält med Lägg i varukorgen, en cookiebanner eller en chattwidget
2.5.7 Dragging MovementsAAAllt som kräver dragrörelser, till exempel ett reglage för prisintervall, behöver ett alternativ som fungerar med ett enda tryck
2.5.8 Target Size (Minimum)AAKlick- och tryckytor är minst 24 × 24 CSS-pixlar, eller har så stort avstånd att en cirkel på 24 px runt varje yta inte nuddar grannarna
3.2.6 Consistent HelpAHjälplänkar, kontaktuppgifter eller chatt visas i samma inbördes ordning på varje sida
3.3.7 Redundant EntryABe inte om samma uppgifter två gånger i samma process; fyll i dem automatiskt eller låt användaren välja dem
3.3.8 Accessible Authentication (Minimum)AAInloggningen får inte bygga på att man memorerar eller skriver av något, om det inte finns ett alternativ eller ett hjälpmedel som inklistring och lösenordshanterare

De övriga tre (2.4.12, 2.4.13 och 3.3.9) är på nivå AAA. Eftersom 2.2 behåller alla kriterier från 2.1 utom 4.1.1 täcker du även 2.1 AA när du uppfyller 2.2 AA.

Vilka WCAG-kriterier underkänns oftast i butiksmallar?

Samma fåtal dyker upp varje år: kontrast, alternativtext, formuläretiketter och namn på länkar och knappar, plus problem med tangentbord och fokus som automatiska verktyg bara delvis fångar.

KriteriumVad som brister i butikerSå åtgärdar du det
1.1.1 Non-text Content (A)Produktbilder utan alternativtext eller med filnamnet som alternativtext; länkade bilder utan textBeskriv produkten som visas (färg, stil, vinkel). Använd alt="" bara för dekoration. Shopify-teman bör skriva ut image.alt
1.4.3 Contrast (Minimum) (AA)Ljusgrå brödtext, platshållartext, reaetiketter, text över hero-bilder4,5:1 för normal text, 3:1 för stor text (ungefär 24 px, eller 18,5 px i fetstil) (W3C (öppnas i en ny flik))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Länkar till varukorg, sök och sociala medier som bara består av ikoner; pilar i bildspel; stängknappar med ”X” utan namnGe varje kontroll synlig text eller en aria-label, till exempel ”Varukorg, 2 artiklar”
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Nyhetsbrevs- och sökfält med bara platshållartext; antalsfält utan etikettAnvänd en <label for> som matchar fältets id; gruppera färgrutor med radioknappar i ett fieldset med en legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Menyer som bara fungerar vid hovring, färgrutor byggda av div-element, popupfönster som inte går att stänga med tangentbordetAnvänd riktiga button- och a-element; Escape stänger överlägg och återför fokus
2.4.7 Focus Visible (AA)outline: none i temats CSSLägg till en :focus-visible-stil som syns tydligt mot bakgrunden

WebAIM fann också att var fjärde länkad bild saknade alternativtext och att 45 % av bilderna utan alternativtext var länkar (WebAIM (öppnas i en ny flik)). I ett kollektionsrutnät är det oftast länken på produktbilden.

Vad ska du kontrollera på startsidan?

Kontrollera sidhuvudet, hero-sektionen och allt som dyker upp, eftersom varje besökare möter dem först.

  • Hopplänk. En länk som ”Hoppa till innehållet” som första fokuserbara element (2.4.1 Bypass Blocks, A).
  • Ikoner i sidhuvudet. Ikonerna för sök, konto och varukorg har tillgängliga namn, och varukorgens namn innehåller antalet artiklar.
  • Meny. Öppnas med Enter eller mellanslag, underpunkterna nås med Tab, stängs med Escape och är inte beroende av hovring (2.1.1). Enligt Shopifys krav för Theme Store (öppnas i en ny flik) ska alla delar av en sida, även rullgardinsmenyer, gå att använda med tangentbordet.
  • Bildspel i hero-sektionen. Om bilderna byts automatiskt i mer än fem sekunder ska du erbjuda en pausknapp (2.2.2 Pause, Stop, Hide, A).
  • Meddelandefält och text på bilder. Mät kontrasten; varumärkesfärger klarar ofta inte 4,5:1.
  • Popupfönster och cookiebanners. Flytta fokus in i popupfönstret, ge e-postfältet en etikett, låt Escape stänga det och se till att en fast banner aldrig helt täcker det fokuserade elementet (2.4.11). W3C anger CSS-egenskapen scroll-padding som ett sätt att hålla fokuserade element fria från fasta fält (W3C (öppnas i en ny flik)).
  • Sidans språk. Elementet html har ett korrekt lang-attribut (3.1.1 Language of Page, A).

Vad ska du kontrollera på kollektionssidor?

Kollektionssidor brister oftast i produktkort, filter och färgrutor (swatches).

  • Produktkort. Bildlänken har alternativtext, eller så är bilden dold för hjälpmedel och titellänken bär namnet.
  • Filter. Varje kryssruta har en etikett och varje grupp har en rubrik eller en legend. Filterpanelen kan öppnas, användas och stängas med tangentbordet. Meddela uppdaterat antal träffar som ett statusmeddelande (4.1.3 Status Messages, AA).
  • Prisreglage. Lägg till sifferfält för lägsta och högsta pris så att filtret fungerar utan dragrörelser (2.5.7) och utan mus (2.1.1).
  • Färgrutor. Varje färgruta har ett textnamn, och ”slutsåld” visas inte enbart med färg (1.4.1 Use of Color, A). Färgrutorna uppfyller 24 × 24 CSS-pixlar eller avståndsregeln (2.5.8).
  • Sortering och sidnumrering. Rullgardinsmenyn för sortering har en etikett; sidlänkar och knappar som ”Visa fler” uppfyller kravet på målstorlek.

Vad ska du kontrollera på produktsidor?

Det är på produktsidan som köpbeslutet fattas, så testa varje kontroll mellan bilderna och knappen Lägg i varukorgen.

  • Bildgalleri. Varje bild har alternativtext, miniatyrerna är knappar med namn som ”Visa bild 2” och pilarna fungerar utan dragrörelser (2.5.7).
  • Variantväljare. Storleks- och färgalternativ ligger i en grupp med etikett (1.3.1), det valda alternativet exponeras för skärmläsare (4.1.2) och storlekar som inte finns i lager markeras i text.
  • Antal. Fältet har en etikett, och minus- och plusknapparna har namn och uppfyller 2.5.8. Shopifys Theme Store kräver nu tryckytor på minst 24 × 24 CSS-pixlar, och Shopifys bästa praxis för tillgänglighet (öppnas i en ny flik) rekommenderar 44 × 44 för primära kontroller.
  • Lägg i varukorgen. Bekräftelser och felmeddelanden läses upp (4.1.3). FTC:s klagomål mot en leverantör av tillgänglighetsöverlägg (overlays) nämnde en webbplats där en skärmläsare inte meddelade att en vara hade lagts i varukorgen, och där en grafik för betyget 5 stjärnor lästes upp som en ”previous”-knapp (FTC:s klagomål (öppnas i en ny flik)).
  • Betyg, flikar och dragspelsmenyer. Betyg har text som ”4,5 av 5 stjärnor”. Dragspelsmenyer (accordions) anger om de är utfällda.
  • Fast fält med Lägg i varukorgen. Det får inte helt täcka det fokuserade elementet när en tangentbordsanvändare tabbar sig nedåt på sidan (2.4.11).
  • Video. Produktvideor med tal har undertexter (1.2.2 Captions (Prerecorded), A).

Vad ska du kontrollera i varukorgen och vid inloggning?

Varukorgen är den sista sidan som de flesta teman har full kontroll över, så testa den hela vägen fram till kassaknappen och kontrollera sedan att inloggningen till kundkontot inte bygger på minne eller på att man skriver av något.

  • Varukorgspanel. Fokus flyttas in i panelen, stannar där medan den är öppen och återgår till varukorgsknappen när Escape stänger den, så som Shopifys bästa praxis beskriver.
  • Orderrader. Varje antalsfält har produktnamnet i sin etikett, och varje ta bort-knapp anger vad den tar bort, till exempel ”Ta bort Linneskjorta, storlek M”.
  • Fält för rabattkod och meddelande. Har etiketter, och fel beskrivs i text (3.3.1 Error Identification, A).
  • Kassaknapp. Nås med Tab, har synligt fokus och döljs inte bakom fasta element.
  • Inloggning (3.3.8). Shopifys kundkonton använder som standard lösenordsfri inloggning med engångskod (öppnas i en ny flik). Enligt W3C måste koder kunna klistras in eller fyllas i automatiskt, och den som blockerar inklistring eller lösenordshanterare underkänns på kriteriet; CAPTCHA med objektigenkänning är tillåtet på AA-nivå, men CAPTCHA med pussel eller räkneuppgifter kräver en annan metod (W3C (öppnas i en ny flik)).

Skillnaderna mellan plattformarna spelar roll här. I Shopify stöds checkout.liquid inte längre (öppnas i en ny flik) för stegen information, frakt och betalning, så det mesta av kassans kod kommer från Shopify och inte från ditt tema; testa de kassaappar och anpassningar som du lägger till. I WooCommerce är kassan en sida på din WordPress-webbplats. WooCommerce uppger att kärnans frontend i allt väsentligt uppfyller WCAG 2.2 AA (redogörelsen senast uppdaterad 1 april 2025), men ditt tema och dina tillägg kan ändå förstöra det (WooCommerce (öppnas i en ny flik)).

Hur testar du en butik mot den här checklistan?

Kombinera en automatisk skanning med ett köp med enbart tangentbord och en kort kontroll med skärmläsare, på varje sidtyp.

  1. Automatisk skanning. Verktyg som axe, WAVE eller Lighthouse fångar kontrast, alternativtext, etiketter och tomma länkar. Shopifys Theme Store kräver ett genomsnittligt tillgänglighetsbetyg i Lighthouse på minst 90 för start-, kollektions- och produktsidor. Det är en miniminivå, inte överensstämmelse: W3C säger att verktyg inte på egen hand kan avgöra tillgänglighet (öppnas i en ny flik).
  2. Köp med enbart tangentbord. Utgå från startsidan, nå en produkt via menyn eller sökningen, filtrera, välj en variant, lägg i varukorgen, öppna varukorgen och nå kassaknappen utan mus.
  3. Stickprov med skärmläsare. Lyssna med VoiceOver eller NVDA på produktnamn, pris, variantens status och bekräftelsen när varan läggs i varukorgen.
  4. Testa igen efter ändringar. Temauppdateringar och nya appar kan göra åtgärder ogjorda.

Vår gratis skanning täcker steg 1 på en startsida, en kollektionssida, en produktsida, en varukorgssida och en innehållssida i riktig Chromium med axe-core. Tillgänglighetsrapport testar upp till 25 sidor, lägger till steg 2 som ett köptest med enbart tangentbord fram till kassaknappen, ger kod före och efter och innehåller en checklista för steg 3, som kräver en person med skärmläsare. Ingen av dem garanterar efterlevnad av ADA eller WCAG.

Vanliga frågor

Är WCAG 2.2 ett lagkrav för webbutiker i USA?

Det amerikanska justitiedepartementet (Department of Justice) har ingen ADA-föreskrift som fastställer en webbstandard för privata företag, och dess vägledning om webben från 2022 (öppnas i en ny flik) hänvisar till WCAG som användbar vägledning. Kravbrev (demand letters) hänvisar ofta till WCAG 2.1 eller 2.2 AA, så rådgör med en jurist om just dina skyldigheter.

Uppfyller man WCAG 2.1 AA om man uppfyller WCAG 2.2 AA?

Ja, i praktiken. WCAG 2.2 behåller alla framgångskriterier från WCAG 2.1 utom 4.1.1 Parsing, som W3C tog bort som föråldrat.

Vilken är den minsta målstorleken i WCAG 2.2?

Enligt 2.5.8 måste klick- och tryckytor vara minst 24 × 24 CSS-pixlar. Mindre ytor godtas om en cirkel på 24 px, centrerad på var och en av dem, inte nuddar andra ytor eller deras cirklar. Undantagna är länkar inuti meningar, webbläsarkontroller utan egen formgivning, väsentliga presentationer och ytor som har en likvärdig kontroll som uppfyller kravet.

Betyder ett tillgänglighetsbetyg på 100 i Lighthouse att min butik uppfyller kraven?

Nej. Automatiska verktyg upptäcker bara en del av felen, och WebAIM påpekar att avsaknad av upptäckta fel inte betyder att en sida är tillgänglig eller uppfyller kraven.

Underkänns en inloggning med lösenord enligt 3.3.8?

Inte i sig. Ett lösenordsfält godkänns när man kan klistra in i det och använda en lösenordshanterare; det är blockering av inklistring eller autofyll som underkänns.

Hur ofta bör jag testa min butik igen?

Testa igen efter varje temauppdatering, ny app eller större ändring i mallarna, och gör regelbundet stickprov på köpflödet, eftersom appar kan lägga in ny kod utan förvarning.

Källor

Alla guider