De Web Content Accessibility Guidelines (WCAG) zijn de richtlijnen van het W3C voor toegankelijke websites. Versie 2.2 werd op 5 oktober 2023 een W3C-aanbeveling. De richtlijnen bestaan uit succescriteria op drie niveaus: A, AA en AAA. Voor webshops is niveau AA de gangbare maatstaf. In dit artikel lees je wat er in WCAG 2.2 is veranderd, hoe de Europese norm zich tot WCAG verhoudt en wat je in je bestelflow kunt controleren.

WCAG, EN 301 549 en de wet

De European Accessibility Act noemt zelf geen WCAG-versie. Bij de richtlijn hoort een geharmoniseerde Europese norm: EN 301 549. Hoofdstuk 9 van die norm gaat over webinhoud en volgt de criteria van WCAG.

  • Versie 3.2.1 van EN 301 549 is aangewezen onder de richtlijn voor websites van overheden en volgt WCAG 2.1.
  • Versie 4.1.1 is op 2 september 2026 gepubliceerd. Volgens de tekst van de norm zijn de hoofdstukken over web, documenten en software bijgewerkt om aan te sluiten op WCAG 2.2.
  • Onder de EAA is op 13 november 2026 nog geen versie van EN 301 549 aangewezen in het Publicatieblad van de EU. Ook AccessibleEU schrijft dat de nieuwe versie nog niet de wettelijke referentienorm is. Wanneer dat gebeurt, is nog niet bevestigd.

Voor de praktijk is de keuze daarom eenvoudig: richt je op WCAG 2.2 niveau AA. Volgens het W3C zijn de criteria van 2.0 en 2.1 in 2.2 in wezen hetzelfde gebleven, met één uitzondering. Wie aan 2.2 AA voldoet, voldoet dus ook aan 2.1 AA, op dat ene vervallen criterium na.

Wat er nieuw is op niveau A en AA

WCAG 2.2 voegt negen succescriteria toe. Zes daarvan vallen onder niveau A of AA. Hieronder staan ze met een voorbeeld uit een webshop.

2.4.11 Focus niet bedekt (minimum), niveau AA

Als een element de toetsenbordfocus krijgt, mag het niet volledig verborgen zijn achter iets dat jij op de pagina hebt gezet. In webshops gaat het vaak om een vaste header, een cookiebanner, een chatknop of een balk met “gratis verzending”. Tab door je pagina en kijk of het gefocuste element steeds zichtbaar blijft.

2.5.7 Sleepbewegingen, niveau AA

Alles wat je met slepen bedient, moet ook met één klik of tik kunnen, tenzij slepen echt nodig is. Denk aan een prijsfilter met een schuifregelaar, een carrousel met productfoto’s of het herschikken van items. Bied bijvoorbeeld invoervelden voor de prijs of knoppen voor vorige en volgende.

2.5.8 Grootte van het aanwijsgebied (minimum), niveau AA

Knoppen en links moeten minstens 24 bij 24 CSS-pixels groot zijn, of genoeg ruimte om zich heen hebben. Er zijn uitzonderingen, bijvoorbeeld voor links in een lopende tekst. Let op kleine kleurstalen, plus- en minknoppen bij het aantal, kruisjes om een venster te sluiten en pictogrammen in de header.

3.2.6 Consistente hulp, niveau A

Bied je hulp aan op meerdere pagina’s, zoals contactgegevens, een contactformulier, een chat of een pagina met veelgestelde vragen? Zet die dan steeds op dezelfde plek ten opzichte van de rest van de pagina. Een klant die vastloopt bij afrekenen, vindt de hulp dan waar hij die verwacht.

3.3.7 Overbodige invoer, niveau A

Informatie die een klant in hetzelfde proces al heeft ingevuld, hoeft hij niet opnieuw te typen. De informatie wordt automatisch ingevuld of is te kiezen. Een bekend voorbeeld is het vinkje “factuuradres is hetzelfde als bezorgadres”. Er zijn uitzonderingen, bijvoorbeeld voor de beveiliging.

3.3.8 Toegankelijke authenticatie (minimum), niveau AA

Voor inloggen mag je geen cognitieve test vragen, zoals een wachtwoord onthouden of een puzzel oplossen, tenzij er een alternatief of een hulpmiddel is. Laat klanten hun wachtwoord plakken en een wachtwoordmanager gebruiken. Een captcha waarbij je tekens moet overtypen of een puzzel moet oplossen, is hier een bekend struikelblok.

De andere drie nieuwe criteria vallen onder niveau AAA: 2.4.12 Focus niet bedekt (uitgebreid), 2.4.13 Focusweergave en 3.3.9 Toegankelijke authenticatie (uitgebreid). Ze zijn geen onderdeel van de gangbare AA-maatstaf, maar wel nuttig als richting.

Wat er is vervallen

Succescriterium 4.1.1 Parsen is in WCAG 2.2 vervallen. Het ging over correcte HTML-syntax, zoals dubbele id’s en goed afgesloten elementen. Browsers en hulpsoftware gaan daar inmiddels anders mee om, en de problemen die ertoe doen vallen onder andere criteria, zoals 4.1.2 Naam, rol, waarde. In WCAG 2.1 en in EN 301 549 versie 3.2.1 staat 4.1.1 nog wel. Dubbele id’s blijven bovendien een bron van fouten, bijvoorbeeld als een label naar het verkeerde veld verwijst.

Criteria die in een bestelflow belangrijk zijn

De nieuwe criteria zijn maar een klein deel van het geheel. Voor bestellen zijn deze criteria uit WCAG 2.0 en 2.1 minstens zo belangrijk:

  • 1.1.1 Niet-tekstuele content: productfoto’s en pictogramknoppen hebben een tekstalternatief.
  • 1.3.1 Info en relaties: koppen, lijsten en formuliervelden zijn ook in de code als zodanig opgebouwd.
  • 1.4.3 Contrast (minimum): tekst heeft een contrast van minstens 4,5:1, grote tekst 3:1.
  • 2.1.1 Toetsenbord: varianten, aantallen, de winkelwagen en afrekenen werken zonder muis.
  • 2.1.2 Geen toetsenbordval: je komt met het toetsenbord uit elk venster.
  • 2.4.3 Focusvolgorde en 2.4.7 Focus zichtbaar: de focus loopt logisch en is steeds te zien.
  • 3.3.1 Foutidentificatie en 3.3.2 Labels of instructies: velden hebben een label en fouten zijn duidelijk.
  • 4.1.2 Naam, rol, waarde: zelfgebouwde knoppen en keuzes zijn voor hulpsoftware herkenbaar.
  • 4.1.3 Statusberichten: de melding “toegevoegd aan winkelwagen” wordt ook voorgelezen.

Automatisch en handmatig toetsen

Geautomatiseerde tools zijn een goed begin, maar ze dekken de nieuwe criteria nog maar beperkt. axe-core, de bekende open-source toetsbibliotheek, heeft in versie 4.14 één regel die specifiek bij WCAG 2.2 hoort: de regel voor de grootte van aanwijsgebieden. Of de focus bedekt raakt, of hulp consistent staat en of je informatie dubbel moet invullen, controleer je dus vooral zelf.

Een werkwijze die goed past bij een webshop:

  1. Draai een geautomatiseerde toets op de stappen van je bestelflow.
  2. Tab door elke stap en let op de focus: zichtbaar, niet bedekt, logische volgorde.
  3. Verstuur formulieren leeg en met fouten, en lees de meldingen met een schermlezer.
  4. Zoom in tot 200 procent en bekijk de winkel op een smal scherm.
  5. Controleer kleine knoppen, sleepbewegingen en de plek van je hulp.
  6. Leg vast wat je vond, wanneer en wat je hebt opgelost.

Wat dit betekent voor je verklaring

Noem in je toegankelijkheidsverklaring welke maatstaf je gebruikt, bijvoorbeeld WCAG 2.2 niveau AA, en welke criteria je nog niet haalt. Een tekortkoming beschrijf je het best in gewone woorden, met het nummer van het criterium erbij, bijvoorbeeld: “De filters op de collectiepagina zijn niet met het toetsenbord te bedienen (WCAG 2.1.1).” Hoe je dat opbouwt, lees je in Toegankelijkheidsverklaring voor je webshop. Met de gratis verklaring-generator vul je de criteria per tekortkoming in.

De officiële tekst van alle criteria lees je in de specificatie van WCAG 2.2 bij het W3C.