WCAG 2.2 AA-checklist voor webshops op Shopify en WooCommerce

Toegankelijkheid van je webshop checken met WCAG 2.2 AA, per paginatype: alt-tekst, contrast, labels, toetsenbord, focus, doelgrootte en nieuwe criteria.

FixReports-redactie10 min. leestijd

Een WCAG 2.2 AA-checklist voor een webshop begint bij de fouten die in de meeste webshopthema’s voorkomen: ontbrekende alt-tekst, tekst met te weinig contrast, links en knoppen zonder toegankelijke naam, formuliervelden zonder label, toetsenbordvallen en onzichtbare focus. Daarnaast voegt WCAG 2.2 AA-controles toe die webshops hard raken: gefocuste elementen die onder vaste balken verdwijnen (2.4.11), aanraakdoelen kleiner dan 24 × 24 CSS-pixels (2.5.8) en inlogprocessen waarbij mensen iets moeten onthouden of overtypen (3.3.8). Test elk paginatype (homepage, collectie, product, winkelwagen) met een toetsenbord en een geautomatiseerde checker, en herstel daarna de templates van het thema, zodat elke pagina de oplossing overneemt.

De belangrijkste punten

  • WCAG 2.2 werd op 5 oktober 2023 een W3C-aanbeveling (W3C Recommendation). De huidige editie is gedateerd 12 december 2024 en is goedgekeurd als ISO/IEC 40500:2025 (opent in een nieuw tabblad).
  • In de WebAIM Million 2026 (opent in een nieuw tabblad) (gegevens van februari 2026) had 95,9% van de homepages van de top één miljoen websites detecteerbare WCAG 2-fouten.
  • De zes meest voorkomende fouten waren tekst met te weinig contrast (83,9% van de pagina’s), ontbrekende alt-tekst (53,1%), ontbrekende formulierlabels (51%), lege links (46,3%), lege knoppen (30,6%) en een ontbrekende paginataal (13,5%).
  • De 42.516 Shopify-homepages in die steekproef hadden gemiddeld 75,1 gedetecteerde fouten, tegenover 56,1 voor alle pagina’s.
  • WCAG 2.2 voegt vier AA-criteria toe (2.4.11, 2.5.7, 2.5.8, 3.3.8) en twee criteria op niveau A (3.2.6, 3.3.7), en schrapt 4.1.1 Parsing.

Wat is er in WCAG 2.2 veranderd voor webshops?

WCAG 2.2 voegde negen succescriteria toe, waarvan zes op niveau A of AA, en schrapte 4.1.1 Parsing als verouderd (W3C WAI (opent in een nieuw tabblad)).

Nieuw criteriumNiveauWat het betekent voor een webshop
2.4.11 Focus Not Obscured (Minimum)AAEen gefocuste link of knop mag niet volledig verborgen worden door een vaste header, een vaste balk met de knop “In winkelwagen”, een cookiebanner of een chatwidget
2.5.7 Dragging MovementsAAAlles waarvoor slepen nodig is, zoals een schuifregelaar voor de prijsklasse, heeft een alternatief nodig dat met één tik werkt
2.5.8 Target Size (Minimum)AAKlik- en aanraakdoelen zijn minstens 24 × 24 CSS-pixels, of staan zo ver uit elkaar dat een cirkel van 24 px rond elk doel de buren niet raakt
3.2.6 Consistent HelpAHulplinks, contactgegevens of chat staan op elke pagina in dezelfde relatieve volgorde
3.3.7 Redundant EntryAVraag binnen één proces niet twee keer om dezelfde informatie; vul die automatisch in of laat mensen die selecteren
3.3.8 Accessible Authentication (Minimum)AAInloggen mag niet afhangen van onthouden of overtypen, tenzij er een alternatief of hulpmiddel is, zoals plakken en wachtwoordmanagers

De andere drie (2.4.12, 2.4.13 en 3.3.9) zijn niveau AAA. Omdat 2.2 elk criterium uit 2.1 behoudt behalve 4.1.1, voldoe je met 2.2 AA ook aan 2.1 AA.

Welke WCAG-criteria gaan het vaakst mis in webshopthema’s?

Elk jaar duikt hetzelfde rijtje op: contrast, alt-tekst, formulierlabels en namen voor links en knoppen, plus problemen met toetsenbord en focus die geautomatiseerde tools maar gedeeltelijk vinden.

CriteriumWat er in webshops misgaatZo los je het op
1.1.1 Non-text Content (A)Productafbeeldingen zonder alt-tekst of met een bestandsnaam als alt-tekst; gelinkte afbeeldingen zonder tekstBeschrijf het getoonde product (kleur, stijl, hoek). Gebruik alt="" alleen voor decoratie. Shopify-thema’s horen image.alt weer te geven
1.4.3 Contrast (Minimum) (AA)Lichtgrijze lopende tekst, placeholdertekst, kortingslabels, tekst over hero-afbeeldingen4,5:1 voor normale tekst, 3:1 voor grote tekst (ongeveer 24 px, of 18,5 px vet) (W3C (opent in een nieuw tabblad))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Links naar winkelwagen, zoeken en sociale media met alleen een icoon; pijlen van sliders; sluitknoppen met een “X” zonder naamGeef elk bedieningselement zichtbare tekst of een aria-label, zoals “Winkelwagen, 2 artikelen”
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Nieuwsbrief- en zoekvelden met alleen placeholdertekst; aantalvelden zonder labelGebruik een <label for> dat overeenkomt met de id van het invoerveld; groepeer kleurstalen die als radioknoppen werken in een fieldset met een legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Menu’s die alleen bij hover werken, kleurstalen opgebouwd uit divs, pop-ups die niet met het toetsenbord te sluiten zijnGebruik echte button- en a-elementen; Escape sluit overlays en zet de focus terug
2.4.7 Focus Visible (AA)outline: none in de CSS van het themaVoeg een :focus-visible-stijl toe die duidelijk afsteekt tegen de achtergrond

WebAIM ontdekte ook dat een op de vier gelinkte afbeeldingen geen alt-tekst had, en dat 45% van de afbeeldingen zonder alt-tekst links waren (WebAIM (opent in een nieuw tabblad)). In een collectieraster is dat meestal de link van de productafbeelding.

Wat controleer je op de homepage?

Controleer de header, de hero en alles wat opduikt, want daar komt elke bezoeker als eerste mee in aanraking.

  • Skiplink. Een link “Naar content springen” (Skip to content) als eerste focusbare element (2.4.1 Bypass Blocks, A).
  • Iconen in de header. De iconen voor zoeken, account en winkelwagen hebben toegankelijke namen, en de naam van de winkelwagen bevat het aantal artikelen.
  • Menu. Opent met Enter of de spatiebalk, subitems zijn bereikbaar met Tab, sluit met Escape en is niet afhankelijk van hover (2.1.1). Volgens de eisen voor de Theme Store (opent in een nieuw tabblad) van Shopify moeten alle onderdelen van een pagina, inclusief dropdownmenu’s, met het toetsenbord toegankelijk zijn.
  • Hero-slider. Bewegen slides langer dan vijf seconden automatisch, bied dan een pauzeknop (2.2.2 Pause, Stop, Hide, A).
  • Aankondigingsbalk en tekst op afbeeldingen. Meet het contrast; merkkleuren halen 4,5:1 vaak niet.
  • Pop-ups en cookiebanners. Verplaats de focus naar de pop-up, geef het e-mailveld een label, laat Escape de pop-up sluiten en zorg dat een vaste banner het gefocuste element nooit volledig bedekt (2.4.11). W3C noemt CSS scroll-padding als een van de manieren om gefocuste elementen vrij te houden van vaste balken (W3C (opent in een nieuw tabblad)).
  • Paginataal. Het html-element heeft een correct lang-attribuut (3.1.1 Language of Page, A).

Wat controleer je op collectiepagina’s?

Collectiepagina’s gaan meestal mis bij productkaarten, filters en kleurstalen.

  • Productkaarten. De link van de afbeelding heeft alt-tekst, of de afbeelding is verborgen voor hulptechnologie en de titellink draagt de naam.
  • Filters. Elk selectievakje heeft een label en elke groep heeft een kop of legend. De filterlade opent, werkt en sluit met het toetsenbord. Kondig bijgewerkte aantallen resultaten aan als statusbericht (4.1.3 Status Messages, AA).
  • Prijsschuifregelaars. Voeg invoervelden voor een minimum- en maximumprijs toe, zodat het filter werkt zonder slepen (2.5.7) en zonder muis (2.1.1).
  • Kleurstalen. Elke kleurstaal heeft een naam in tekst, en “uitverkocht” wordt niet alleen met kleur aangegeven (1.4.1 Use of Color, A). Kleurstalen zijn minstens 24 × 24 CSS-pixels of voldoen aan de afstandsregel (2.5.8).
  • Sorteren en paginering. De sorteerkeuzelijst heeft een label; paginalinks en knoppen voor “meer laden” voldoen aan de doelgrootte.

Wat controleer je op productpagina’s?

Op de productpagina valt de koopbeslissing, dus test elk bedieningselement tussen de foto’s en de knop “In winkelwagen”.

  • Galerij. Elke afbeelding heeft alt-tekst, miniaturen zijn knoppen met namen zoals “Afbeelding 2 tonen”, en pijlen werken zonder slepen (2.5.7).
  • Variantkiezers. Opties voor maat en kleur staan in een groep met een label (1.3.1), de gekozen optie wordt doorgegeven aan schermlezers (4.1.2), en niet-beschikbare maten worden in tekst aangeduid.
  • Aantal. Het invoerveld heeft een label, en de min- en plusknoppen hebben namen en voldoen aan 2.5.8. De Theme Store van Shopify eist nu aanraakdoelen van minstens 24 × 24 CSS-pixels, en de best practices voor toegankelijkheid (opent in een nieuw tabblad) van Shopify raden 44 × 44 aan voor de belangrijkste bedieningselementen.
  • In winkelwagen. Succes- en foutmeldingen worden aangekondigd (4.1.3). De klacht van de FTC tegen een leverancier van overlays noemde een site waar een schermlezer niet meldde dat een artikel aan de winkelwagen was toegevoegd, en een grafiek met een beoordeling van 5 sterren die werd voorgelezen als een knop “previous” (vorige) (klacht van de FTC (opent in een nieuw tabblad)).
  • Beoordelingen, tabbladen en accordeons. Beoordelingen hebben tekst zoals “4,5 van 5 sterren”. Accordeons geven door of ze zijn uitgeklapt.
  • Vaste balk met “In winkelwagen”. Die mag het gefocuste element niet volledig bedekken terwijl een toetsenbordgebruiker met Tab door de pagina gaat (2.4.11).
  • Video. Productvideo’s met gesproken tekst hebben ondertitels (1.2.2 Captions (Prerecorded), A).

Wat controleer je in de winkelwagen en bij het inloggen?

De winkelwagen is de laatste pagina die de meeste thema’s volledig zelf in de hand hebben, dus test die tot en met de afrekenknop, en controleer daarna of inloggen op een account niet afhangt van geheugen of overtypen.

  • Winkelwagenlade. De focus gaat naar de lade, blijft daar zolang die open is, en keert terug naar de winkelwagenknop als Escape de lade sluit, zoals de best practices van Shopify beschrijven.
  • Orderregels. Elk aantalveld heeft een label met de productnaam, en elke verwijderknop zegt wat die verwijdert, zoals “Linnen overhemd, maat M verwijderen”.
  • Velden voor kortingscode en opmerking. Voorzien van een label, met fouten die in tekst worden beschreven (3.3.1 Error Identification, A).
  • Afrekenknop. Bereikbaar met Tab, zichtbaar gefocust en niet verborgen achter vaste elementen.
  • Inloggen (3.3.8). De klantaccounts van Shopify gebruiken standaard inloggen zonder wachtwoord met een eenmalige code (opent in een nieuw tabblad). Volgens W3C moeten codes geplakt of automatisch ingevuld kunnen worden, en faalt het criterium als plakken of wachtwoordmanagers worden geblokkeerd; CAPTCHA’s waarbij je objecten herkent, zijn op niveau AA toegestaan, maar voor CAPTCHA’s met puzzels of rekensommen is een andere methode nodig (W3C (opent in een nieuw tabblad)).

Hier maken de verschillen tussen platforms uit. Bij Shopify wordt checkout.liquid niet meer ondersteund (opent in een nieuw tabblad) voor de stappen informatie, verzending en betaling, dus de meeste markup van het afrekenproces komt van Shopify en niet van je thema; test de checkout-apps en aanpassingen die je toevoegt. Bij WooCommerce is het afrekenen een pagina op je eigen WordPress-site. WooCommerce zegt dat de front-end van de kern grotendeels voldoet aan WCAG 2.2 AA (verklaring laatst bijgewerkt op 1 april 2025), maar je thema en plugins kunnen dat nog steeds tenietdoen (WooCommerce (opent in een nieuw tabblad)).

Hoe test je een webshop aan de hand van deze checklist?

Combineer per paginatype een geautomatiseerde scan met een aankoop met alleen het toetsenbord en een korte controle met een schermlezer.

  1. Geautomatiseerde scan. Tools zoals axe, WAVE of Lighthouse vinden problemen met contrast, alt-tekst, labels en lege links. De Theme Store van Shopify vraagt om een gemiddelde toegankelijkheidsscore in Lighthouse van minstens 90 op de homepage, collectiepagina’s en productpagina’s. Dat is een ondergrens, geen conformiteit: volgens W3C kunnen tools de toegankelijkheid niet op eigen kracht bepalen (opent in een nieuw tabblad).
  2. Aankoop met alleen het toetsenbord. Ga zonder muis vanaf de homepage via het menu of de zoekfunctie naar een product, gebruik een filter, kies een variant, voeg het product toe aan de winkelwagen, open de winkelwagen en bereik de afrekenknop.
  3. Steekproef met een schermlezer. Luister met VoiceOver of NVDA naar de productnaam, de prijs, de status van de variant en de bevestiging na “In winkelwagen”.
  4. Test opnieuw na wijzigingen. Thema-updates en nieuwe apps kunnen oplossingen ongedaan maken.

Onze gratis scan dekt stap 1 op een homepage, collectiepagina, productpagina, winkelwagen en contentpagina in een echte Chromium-browser met axe-core. Het Toegankelijkheidsrapport test maximaal 25 pagina’s, voegt stap 2 toe als winkeltest met alleen het toetsenbord tot aan de afrekenknop, geeft code in een voor-en-navergelijking, en bevat een checklist voor stap 3, waarvoor iemand met een schermlezer nodig is. Geen van beide garandeert ADA- of WCAG-conformiteit.

Veelgestelde vragen

Is WCAG 2.2 wettelijk verplicht voor webshops in de Verenigde Staten?

Het Amerikaanse ministerie van Justitie (Justice Department) heeft geen ADA-regelgeving die een webstandaard vastlegt voor private bedrijven, en zijn webrichtlijnen uit 2022 (opent in een nieuw tabblad) noemen WCAG als nuttige leidraad. Sommatiebrieven (demand letters) in de VS verwijzen vaak naar WCAG 2.1 of 2.2 AA, dus bespreek je specifieke verplichtingen met een advocaat.

Voldoe ik met WCAG 2.2 AA ook aan WCAG 2.1 AA?

Ja, in de praktijk wel. WCAG 2.2 behoudt alle succescriteria van WCAG 2.1 behalve 4.1.1 Parsing, dat W3C als verouderd heeft geschrapt.

Wat is de minimale doelgrootte in WCAG 2.2?

Volgens 2.5.8 moeten doelen minstens 24 × 24 CSS-pixels zijn, tenzij een cirkel van 24 px, gecentreerd op elk kleiner doel, geen andere doelen of hun cirkels raakt. Links in lopende zinnen, niet-opgemaakte bedieningselementen van de browser, essentiële presentaties en doelen met een gelijkwaardig bedieningselement dat wel voldoet, zijn uitgezonderd.

Betekent een Lighthouse-toegankelijkheidsscore van 100 dat mijn webshop conform is?

Nee. Geautomatiseerde tools detecteren maar een deel van de fouten, en WebAIM merkt op dat het ontbreken van gedetecteerde fouten niet betekent dat een pagina toegankelijk of conform is.

Faalt inloggen met een wachtwoord voor 3.3.8?

Niet op zichzelf. Een wachtwoordveld voldoet als mensen erin kunnen plakken en een wachtwoordmanager kunnen gebruiken; wat faalt, is het blokkeren van plakken of automatisch invullen.

Hoe vaak moet ik mijn webshop opnieuw testen?

Test opnieuw na elke thema-update, nieuwe app of grote wijziging aan een template, en controleer het aankooppad regelmatig steekproefsgewijs, want apps kunnen zonder waarschuwing nieuwe markup toevoegen.

Bronnen

Alle handleidingen