WCAG 2.2 AA-tjekliste: webtilgængelighed for webshops

WCAG 2.2 AA-tjekliste til Shopify- og WooCommerce-webshops efter sidetype: alt-tekst, kontrast, ledetekster, tastatur, fokus, målstørrelse og nye 2.2-krav.

FixReports’ redaktion10 min. læsetid

En tjekliste efter WCAG 2.2 AA til en webshop starter med de fejl, der findes i de fleste butiksskabeloner: manglende alt-tekst, tekst med for lav kontrast, links og knapper uden et tilgængeligt navn, formularfelter uden ledetekst, tastaturfælder og usynligt fokus. Derefter tilføjer WCAG 2.2 AA-krav, der rammer webshops hårdt: elementer i fokus, der skjules under fastlåste (sticky) bjælker (2.4.11), klik- og trykmål, der er mindre end 24 × 24 CSS-pixels (2.5.8), og login, hvor man skal huske eller genindtaste noget (3.3.8). Test hver sidetype (forside, kollektion, produkt, kurv) med tastaturet og et automatisk testværktøj, og ret derefter temaets skabeloner, så alle sider arver rettelsen.

Det vigtigste kort fortalt

  • WCAG 2.2 blev en W3C-anbefaling (Recommendation) den 5. oktober 2023. Den aktuelle udgave er dateret 12. december 2024 og er godkendt som ISO/IEC 40500:2025 (åbner i en ny fane).
  • I WebAIM Million 2026 (åbner i en ny fane) (data fra februar 2026) havde 95,9 % af forsiderne på de en million største websites WCAG 2-fejl, der kunne registreres automatisk.
  • De seks mest almindelige fejl var tekst med lav kontrast (83,9 % af siderne), manglende alt-tekst (53,1 %), manglende ledetekster i formularer (51 %), tomme links (46,3 %), tomme knapper (30,6 %) og manglende angivelse af sidens sprog (13,5 %).
  • De 42.516 Shopify-forsider i stikprøven havde i gennemsnit 75,1 registrerede fejl mod 56,1 for alle sider.
  • WCAG 2.2 tilføjer fire AA-kriterier (2.4.11, 2.5.7, 2.5.8, 3.3.8) og to kriterier på niveau A (3.2.6, 3.3.7) og fjerner 4.1.1 Parsing.

Hvad er nyt i WCAG 2.2 for webshops?

WCAG 2.2 tilføjede ni succeskriterier, seks af dem på niveau A eller AA, og fjernede 4.1.1 Parsing som forældet (W3C WAI (åbner i en ny fane)).

Nyt kriteriumNiveauHvad det betyder for en webshop
2.4.11 Focus Not Obscured (Minimum)AAEt link eller en knap i fokus må ikke være helt skjult af en fastlåst header, en fastlåst »Læg i kurv«-bjælke, et cookiebanner eller en chat-widget
2.5.7 Dragging MovementsAAAlt, der kræver træk, for eksempel en skyder til prisinterval, skal have et alternativ, der virker med et enkelt tryk
2.5.8 Target Size (Minimum)AAKlik- og trykmål er mindst 24 × 24 CSS-pixels eller har så stor afstand, at en cirkel på 24 px omkring hvert mål ikke rører nabomålene
3.2.6 Consistent HelpAHjælpelinks, kontaktoplysninger eller chat vises i samme relative rækkefølge på alle sider
3.3.7 Redundant EntryASpørg ikke om de samme oplysninger to gange i samme forløb; udfyld dem automatisk, eller lad brugeren vælge dem
3.3.8 Accessible Authentication (Minimum)AALogin må ikke afhænge af, at man husker eller afskriver noget, medmindre der er et alternativ eller en hjælp som indsætning og adgangskodeadministratorer

De tre øvrige (2.4.12, 2.4.13 og 3.3.9) er på niveau AAA. Da 2.2 bevarer alle kriterier fra 2.1 undtagen 4.1.1, dækker du også 2.1 AA, når du opfylder 2.2 AA.

Hvilke WCAG-kriterier fejler oftest i butiksskabeloner?

Det er de samme få hvert år: kontrast, alt-tekst, ledetekster i formularer og navne på links og knapper samt problemer med tastatur og fokus, som automatiske værktøjer kun delvist fanger.

KriteriumHvad der fejler i webshopsSådan retter du det
1.1.1 Non-text Content (A)Produktbilleder uden alt-tekst eller med filnavnet som alt-tekst; billeder med link, men uden tekstBeskriv det viste produkt (farve, stil, vinkel). Brug kun alt="" til dekoration. Shopify-temaer bør udskrive image.alt
1.4.3 Contrast (Minimum) (AA)Lysegrå brødtekst, pladsholdertekst, udsalgsmærker, tekst oven på hero-billeder4,5:1 for normal tekst, 3:1 for stor tekst (cirka 24 px eller 18,5 px fed) (W3C (åbner i en ny fane))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Links til kurv, søgning og sociale medier, der kun består af et ikon; pile i slidere; »X«-lukkeknapper uden navnGiv hvert betjeningselement synlig tekst eller en aria-label, for eksempel »Kurv, 2 varer«
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Nyhedsbrevs- og søgefelter med kun pladsholdertekst; antalsfelter uden ledetekstBrug en <label for>, der matcher feltets id; grupper farvefelter, der er radioknapper, i et fieldset med en legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Menuer, der kun virker ved hover, farvefelter bygget af div-elementer, pop op-vinduer, der ikke kan lukkes med tastaturetBrug rigtige button- og a-elementer; Escape lukker overlays og sender fokus tilbage
2.4.7 Focus Visible (AA)outline: none i temaets CSSTilføj en :focus-visible-stil, der skiller sig tydeligt ud fra baggrunden

WebAIM fandt også, at hvert fjerde billede med link ikke havde nogen alt-tekst, og at 45 % af billederne uden alt-tekst var links (WebAIM (åbner i en ny fane)). I et kollektionsgitter er det som regel linket på produktbilledet.

Hvad skal du tjekke på forsiden?

Tjek headeren, hero-sektionen og alt, der dukker op, fordi alle besøgende møder dem først.

  • Skip-link. Et »Gå til indhold«-link som det første element, der kan få fokus (2.4.1 Bypass Blocks, A).
  • Ikoner i headeren. Ikonerne for søgning, konto og kurv har tilgængelige navne, og kurvens navn indeholder antallet af varer.
  • Menu. Åbner med Enter eller mellemrumstasten, undermenupunkterne kan nås med Tab, lukker med Escape og afhænger ikke af hover (2.1.1). Shopifys krav til Theme Store (åbner i en ny fane) siger, at alle dele af en side, også dropdown-menuer, skal kunne betjenes med tastaturet.
  • Hero-slider. Hvis slides bevæger sig automatisk i mere end fem sekunder, skal der være en mulighed for at sætte dem på pause (2.2.2 Pause, Stop, Hide, A).
  • Meddelelsesbjælke og tekst på billeder. Mål kontrasten; brandfarver klarer ofte ikke 4,5:1.
  • Pop op-vinduer og cookiebannere. Flyt fokus ind i pop op-vinduet, giv e-mailfeltet en ledetekst, gør det muligt at lukke med Escape, og sørg for, at et fastlåst banner aldrig dækker elementet i fokus helt (2.4.11). W3C nævner CSS-egenskaben scroll-padding som én måde at holde elementer i fokus fri af fastlåste bjælker (W3C (åbner i en ny fane)).
  • Sidens sprog. html-elementet har en korrekt lang-attribut (3.1.1 Language of Page, A).

Hvad skal du tjekke på kollektionssider?

Kollektionssider fejler som regel på produktkort, filtre og farvefelter.

  • Produktkort. Billedlinket har alt-tekst, eller billedet er skjult for hjælpemidler, og titellinket bærer navnet.
  • Filtre. Hvert afkrydsningsfelt har en ledetekst, og hver gruppe har en overskrift eller en legend. Filterpanelet kan åbnes, bruges og lukkes med tastaturet. Få det opdaterede antal resultater læst op som en statusmeddelelse (4.1.3 Status Messages, AA).
  • Prisskydere. Tilføj talfelter til minimums- og maksimumspris, så filteret virker uden træk (2.5.7) og uden mus (2.1.1).
  • Farvefelter. Hvert farvefelt har et navn i tekst, og »udsolgt« vises ikke kun med farve (1.4.1 Use of Color, A). Farvefelterne opfylder 24 × 24 CSS-pixels eller afstandsreglen (2.5.8).
  • Sortering og sideinddeling. Sorteringsmenuen har en ledetekst; sidelinks og »Indlæs flere«-knapper opfylder kravet til målstørrelse.

Hvad skal du tjekke på produktsider?

Det er på produktsiden, at købsbeslutningen træffes, så test alle betjeningselementer mellem billederne og »Læg i kurv«-knappen.

  • Galleri. Hvert billede har alt-tekst, miniaturer er knapper med navne som »Vis billede 2«, og pilene virker uden træk (2.5.7).
  • Variantvælgere. Størrelses- og farvevalg står i en gruppe med ledetekst (1.3.1), det valgte gøres tilgængeligt for skærmlæsere (4.1.2), og størrelser, der ikke kan fås, er markeret med tekst.
  • Antal. Feltet har en ledetekst, og minus- og plusknapperne har navne og opfylder 2.5.8. Shopifys Theme Store kræver nu trykmål på mindst 24 × 24 CSS-pixels, og Shopifys best practices for tilgængelighed (åbner i en ny fane) anbefaler 44 × 44 for primære betjeningselementer.
  • Læg i kurv. Bekræftelser og fejlmeddelelser bliver læst op (4.1.3). FTC’s klage mod en leverandør af overlays nævnte et website, hvor en skærmlæser ikke meddelte, at en vare var lagt i kurven, og hvor en grafik med en bedømmelse på 5 stjerner blev læst op som en »previous«-knap (FTC’s klage (åbner i en ny fane)).
  • Bedømmelser, faner og harmonikaer. Bedømmelser har tekst som »4,5 ud af 5 stjerner«. Harmonikaer (accordions) angiver, om de er foldet ud.
  • Fastlåst »Læg i kurv«-bjælke. Den må ikke dække elementet i fokus helt, mens en tastaturbruger tabber sig ned gennem siden (2.4.11).
  • Video. Produktvideoer med tale har undertekster (1.2.2 Captions (Prerecorded), A).

Hvad skal du tjekke i kurven og ved login?

Kurven er den sidste side, som de fleste temaer har fuld kontrol over, så test den helt frem til knappen til kassen, og tjek derefter, at login på kundekontoen ikke afhænger af hukommelse eller genindtastning.

  • Kurvpanel (cart drawer). Fokus flyttes ind i panelet, bliver der, mens det er åbent, og vender tilbage til kurvknappen, når Escape lukker det, sådan som Shopifys best practices beskriver.
  • Varelinjer. Hvert antalsfelt har en ledetekst med produktnavnet, og hver fjern-knap siger, hvad den fjerner, for eksempel »Fjern Hørskjorte, størrelse M«.
  • Rabat- og bemærkningsfelter. Har ledetekster, og fejl beskrives i tekst (3.3.1 Error Identification, A).
  • Knappen til kassen. Kan nås med Tab, har synligt fokus og er ikke skjult bag fastlåste elementer.
  • Login (3.3.8). Shopifys kundekonti bruger som standard login uden adgangskode med en engangskode (åbner i en ny fane). W3C siger, at koder skal kunne indsættes eller udfyldes automatisk, og at blokering af indsætning eller adgangskodeadministratorer ikke opfylder kriteriet; CAPTCHA’er med genkendelse af objekter er tilladt på niveau AA, men CAPTCHA’er med gåder eller regnestykker kræver en anden metode (W3C (åbner i en ny fane)).

Forskellene mellem platformene betyder noget her. I Shopify er checkout.liquid ikke længere understøttet (åbner i en ny fane) i trinnene for oplysninger, levering og betaling, så det meste af kassens markup kommer fra Shopify og ikke fra dit tema; test de kasse-apps og tilpasninger, du selv tilføjer. I WooCommerce er kassen en side på dit WordPress-website. WooCommerce oplyser, at deres kerne-frontend i det væsentlige er i overensstemmelse med WCAG 2.2 AA (erklæringen er senest opdateret 1. april 2025), men dit tema og dine plugins kan stadig ødelægge det (WooCommerce (åbner i en ny fane)).

Hvordan tester du en webshop efter denne tjekliste?

Kombinér en automatisk scanning med et køb kun med tastaturet og et kort tjek med skærmlæser på hver sidetype.

  1. Automatisk scanning. Værktøjer som axe, WAVE eller Lighthouse fanger problemer med kontrast, alt-tekst, ledetekster og tomme links. Shopifys Theme Store kræver en gennemsnitlig Lighthouse-score for tilgængelighed på mindst 90 på forside, kollektionssider og produktsider. Det er et minimum, ikke overensstemmelse: W3C siger, at værktøjer ikke alene kan afgøre, om noget er tilgængeligt (åbner i en ny fane).
  2. Køb kun med tastatur. Gå uden mus fra forsiden til et produkt via menuen eller søgningen, filtrer, vælg en variant, læg varen i kurven, åbn kurven, og nå frem til knappen til kassen.
  3. Stikprøve med skærmlæser. Lyt med VoiceOver eller NVDA til produktnavn, pris, variantstatus og bekræftelsen, når varen er lagt i kurven.
  4. Test igen efter ændringer. Temaopdateringer og nye apps kan rulle rettelser tilbage.

Vores gratis scanning dækker trin 1 på en forside, en kollektionsside, en produktside, en kurvside og en indholdsside i ægte Chromium med axe-core. Vores Tilgængelighedsrapport tester op til 25 sider, tilføjer trin 2 som en indkøbstest kun med tastatur frem til knappen til kassen, giver kode før og efter rettelsen og indeholder en tjekliste til trin 3, som kræver et menneske med en skærmlæser. Ingen af dem garanterer overensstemmelse med ADA eller WCAG.

Ofte stillede spørgsmål

Er WCAG 2.2 et lovkrav for webshops i USA?

Det amerikanske justitsministerium (Department of Justice) har ingen regulering under ADA, der fastsætter en webstandard for private virksomheder, og ministeriets webvejledning fra 2022 (åbner i en ny fane) henviser til WCAG som nyttig vejledning. Kravbreve (demand letters) henviser ofte til WCAG 2.1 eller 2.2 AA, så tal med en advokat om dine konkrete forpligtelser.

Opfylder man også WCAG 2.1 AA, når man opfylder WCAG 2.2 AA?

Ja, i praksis. WCAG 2.2 bevarer alle succeskriterier fra WCAG 2.1 undtagen 4.1.1 Parsing, som W3C fjernede som forældet.

Hvad er minimumsstørrelsen for klik- og trykmål i WCAG 2.2?

Efter 2.5.8 skal mål være mindst 24 × 24 CSS-pixels, medmindre en cirkel på 24 px, der er centreret på hvert mindre mål, ikke rører andre mål eller deres cirkler. Undtaget er links inde i sætninger, browserens betjeningselementer uden egen styling, mål, hvor præsentationen er afgørende, og mål, hvor der findes et tilsvarende betjeningselement, der opfylder kravet.

Betyder en Lighthouse-score for tilgængelighed på 100, at min webshop overholder kravene?

Nej. Automatiske værktøjer finder kun en del af fejlene, og WebAIM påpeger, at fravær af registrerede fejl ikke betyder, at en side er tilgængelig eller i overensstemmelse med kravene.

Er et login med adgangskode i strid med 3.3.8?

Ikke i sig selv. Et adgangskodefelt opfylder kriteriet, når man kan indsætte tekst i det og bruge en adgangskodeadministrator; det er blokering af indsætning eller autoudfyldning, der ikke opfylder det.

Hvor ofte skal jeg teste min webshop igen?

Test igen efter hver temaopdatering, hver ny app og hver større ændring af skabelonerne, og tag jævnligt stikprøver af købsforløbet, da apps kan indsætte ny markup uden varsel.

Kilder

Alle guides