WCAG 2.2 en webshops: wat je nú moet aanpassen

WCAG 2.2 verandert een aantal praktische eisen die direct invloed hebben op webshops: focusbeheer, aanraakdoelen en interacties zoals slepen zijn concreet aangescherpt. Voor designers, developers en redacties betekent dit: kleine aanpassingen kunnen grote toegankelijkheidswinst opleveren en juridische risico’s en verkoopverlies verminderen.

Dit artikel maakt je snel en gericht klaar voor WCAG 2.2. Geen theorie zonder actie: concrete checklists, voorbeeldcode (CSS/HTML/ARIA) en teststappen zodat je direct aan de slag kunt. Gebruik onze WCAG checker / validator en download onze plugin op wcagtool.nl/plugin voor geautomatiseerde controles — of neem contact op via ons contactformulier (we reageren binnen 24 uur).

Wat betekent dit?

WCAG 2.2 introduceert nieuwe en aangescherpte succescriteria die vooral relevant zijn voor interactieve onderdelen van webshops: zichtbare focus, minimale aanraakgrootte, en alternatieven voor drag-only interacties. In praktijk betekent dit dat knoppen, links, formuliercontrols en carrousels vaak kleine maar noodzakelijke aanpassingen nodig hebben.

Belangrijke punten (kort)

Zichtbare focus moet voldoen aan voldoende contrast en grootte.
Aanraakdoelen mogen niet te klein zijn (minimale target size of compenserende ruimere klikgebieden).
Slepen als enige manier om iets te bediennen is niet toegestaan: bied altijd knoppen of toetsenbordalternatieven.

Waarom dit belangrijk is

Voor webshops is toegankelijkheid direct verbonden aan conversie en klanttevredenheid: bezoekers die problemen ondervinden bij het afrekenen of navigeren haken eerder af. Daarnaast beperkt voldoen aan WCAG 2.2 juridische risico’s en vergroot het je doelgroep.

Zakelijke argumenten

Meer klanten: betere gebruikservaring voor mobiel en toetsenbordgebruikers.
Minder supportvragen: duidelijkere focus en grotere targets verminderen fouten bij het invoeren.
Compliance: voorkom klachten en claims door zichtbaar en meetbaar toegankelijk te zijn — start met onze validator.

Direct toepassen

Hier volgen concrete, direct toepasbare aanpassingen. Werk stap voor stap: identificeer eerst kritische flows (productselectie, winkelwagen, checkout), pas dan UI-componenten aan en test.

Checklist per pagina

Homepage / categoriepagina: zoek- en filtercontrols toetsenbordtoegankelijk en focus zichtbaar.
Productpagina: add-to-cart knop voldoende groot en label expliciet (geen icon-only zonder aria-label).
Winkelwagen & checkout: alle velden focusbaar, foutmeldingen programmatically linked (aria-describedby) en grote klikgebieden rond CTA’s.

CSS: focus zichtbaar en consistent

/* Zorg voor een duidelijke focusring met voldoende contrast */:focus{outline:3px solid #ff9800;outline-offset:2px;box-shadow:0 0 0 4px rgba(255,152,0,0.15);}button:focus,a:focus,input:focus{outline-offset:3px;}

CSS: veilige aanraakdoelen

/* Minimum aanraakbare grootte; bied compensatie met padding/line-height */.btn{min-width:44px;min-height:44px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;}/* Voor icon-only knoppen */.icon-btn{padding:10px;margin:-10px;} /* vergroot klikgebied zonder visuele wijziging */

HTML/ARIA: heldere labels

<button class="icon-btn" aria-label="Toevoegen aan winkelwagen"><span class="icon-cart"></span></button><!-- of expliciet --><button class="btn primary">In winkelwagen</button>

Alternatief voor drag-only interacties

<div class="carousel"><button class="prev" aria-label="Vorige"></button><div class="track" role="list">...</div><button class="next" aria-label="Volgende"></button></div>/* Zorg voor toetsenbordbediening met left/right en focusable items */

Hoe test je dat?

Combineer geautomatiseerde tools met handmatige checks. Onze WCAG checker / validator vindt veel problemen snel; daarna voer je hands-on tests uit voor zaken die tooling mist.

Handmatige teststappen (practisch)

Keyboard-only: navigeer complete aankoopflow met Tab, Shift+Tab, Enter en Space. Noteer plekken waar focus verloren gaat of niet zichtbaar is.
Zoomtest: zet browser op 200–400% en controleer of inhoud nog functioneel en zichtbaar blijft (checkoutvelden toegankelijk, knoppen niet overlappend).
Touch target meten: meet knoppen op mobiel (minimaal 44×44 CSS px) of zorg voor hit-area uitbreiding via padding/margin.
Slepen vermijden: controleer dat carrousels en sliders ook via knoppen en toetsenbord te bedienen zijn.
Screenreader: test met NVDA/VoiceOver of labels, foutmeldingen en aria-describedby correct uitgelezen worden tijdens checkout.

Automatisch + handmatig workflow

Start met onze validator voor een site-scan.
Gebruik de plugin (download op wcagtool.nl/plugin) tijdens development voor inline tips.
Fix hoog-prioriteit issues en her-test handmatig (keyboard, zoom, screenreader).

Wanneer is dit extra belangrijk?

Sla prioriteit toe op kritieke conversiepunten en mobiele touch-first flows: productl ijsten, add-to-cart, upsells en checkout. Ook voor B2B-webshops met complexe filters en maatwerkopties zijn de nieuwe WCAG 2.2-eisen relevant.

Prioriteitsmatrix

Hoog: checkout CTA’s, formuliervalidatie, betaalmethoden — direct testen en fixen.
Middel: productfilters en zoekinterface — pas focus- en targetgrootte aan.
Laag: esthetische animaties — zorg dat alternatieven beschikbaar zijn en beweging uit te schakelen is.

Specifieke voorbeelden

Mobiele add-to-cart knoppen: vergroot klikgebied en test op echte apparaten.
Prijsfilters die sleepbars gebruiken: voeg knoppen en toetsenbordbediening toe.
Promobanners met dismiss-knop: ensure aria-label en voldoende target size.

Wil je een snelle scan van je webshop? Gebruik onze WCAG checker / validator of download de plugin op wcagtool.nl/plugin. Voor implementatiehulp of een prioriteitenlijst op maat: vul het contactformulier — ons team reageert binnen 24 uur.

Laatste tip: begin met de checkoutflow en mobiele primaire acties—los die eerst op. Gebruik onze validator elke sprint en installeer de plugin voor continue feedback; dat bespaart tijd en voorkomt regressies.