WCAG 2.2 voor webshops: 5 stappen om vandaag compliant te zijn

Geplaatst op door

WCAG 2.2 voor webshops: 5 stappen om vandaag compliant te zijn

WCAG 2.2 voor webshops: 5 stappen om vandaag compliant te zijn

Webshops verliezen omzet en vertrouwen als onderdelen niet toegankelijk zijn. WCAG 2.2 brengt concrete eisen die vooral e-commerce-sites raken: focusindicatoren, targetgroottes, alternatieven voor slepen en toegankelijke authenticatie. Wie dit goed regelt, vergroot conversie, verlaagt support en voldoet aan wet- en regelgeving.

Dit artikel is praktisch en actiegericht: vijf direct toepasbare stappen voor designers, developers en redacties om vandaag te beginnen met compliance. Inclusief checklists, short code-snippets en concrete teststappen. Gebruik onze WCAG checker/validator, download de plugin of neem contact op — ons team reageert binnen 24 uur op het contactformulier.

Wat betekent dit?

WCAG 2.2 voegt succescriteria toe en scherpt aandachtspunten aan die webshops direct raken: zichtbare focus, niet-verdekte focus, voldoende doelgrootte voor knoppen, alternatieven voor drag & drop en toegankelijke inlog/checkout-opties. Praktisch betekent dat: zorg dat toetsenbordgebruikers, mobiele gebruikers met motorische beperkingen en schermlezergebruikers zonder extra hulp door je checkout en productpagina’s kunnen.

Waarom dit belangrijk is

Toegankelijkheid is geen decoratie maar basiskwaliteit: betere UX, minder afgebroken checkouts en juridische risicovermijding. Bezoekers met beperkingen vormen een koopkrachtige groep en vaak profiteren alle gebruikers van verbeteringen (bijv. grotere knoppen voor touch).

Direct toepassen — 5 stappen

Stap 1 — Focus zichtbaar en consistent (2.4.11 Focus Appearance)

Actie: implementeer een opvallende, contrastrijke focus-stijl voor alle interactieve elementen. Gebruik :focus-visible en behoud een minimale dikte en contrast.

Code (CSS): button:focus-visible, a:focus-visible, input:focus-visible{outline:3px solid #0a66c2; outline-offset:2px; border-radius:4px;}

Mini-checklist:

  • Alle interactieve elementen tonen focus bij toetsenbordnavigatie.
  • Focus-contrast ≥ 3:1 ten opzichte van achtergrond.
  • Geen focus weghalen met outline: none zonder alternatief.

Teststappen: navigeer alleen met Tab/Shift+Tab op productpagina en in checkout; controleer dat elke selectie visueel zichtbaar is.

Stap 2 — Zorg dat focus niet wordt afgedekt (2.4.12 Focus Not Obscured)

Actie: voorspel overlays, sticky headers en modals zodat gefocuste elementen zichtbaar blijven. Gebruik scroll-margin-top bij anchors en zorg dat modals focus-trap correct scrollet.

Code-voorbeeld: .section{scroll-margin-top:80px;} /* hoogte sticky header */

Mini-checklist:

  • Sticky header verbergt geen gefocuste knop of formulierveld.
  • Modals scrollet gefocuste input indien nodig.

Teststappen: ga naar een ankerlink, activeer Tab en Enter op linkpunten; controleer dat het gefocuste element binnen het venster blijft en niet achter de header verdwijnt.

Stap 3 — Targetgrootte en touch-vriendelijkheid (2.5.8 Target Size)

Actie: maak klikbare targets groot genoeg of bied voldoende touch padding. Minimale aanrakingzone: 44×44 CSS-pixels (practische richtlijn). Voor inline tekstlinks kun je paddings met pseudo-elementen gebruiken.

CSS-voorbeeld: .btn{min-width:44px;min-height:44px;padding:10px 14px;touch-action:manipulation;} Voor inline links: a.big-hit::before{content:'';position:absolute;inset:-10px;border-radius:6px;}

Mini-checklist:

  • Alle CTA’s en ‘voeg toe aan winkelwagen’ knoppen minimaal 44×44 CSS-px of equivalente padding.
  • Gebruikerstoetsen en keyboard-acties maken targets ook inzetbaar.

Teststappen: test op mobiel met vinger, meet touchzone; gebruik devtools om CSS-pixelgroottes te controleren.

Stap 4 — Alternatieven voor slepen en complex gedrag (2.5.7 Dragging Movements)

Actie: vervang drag-only interacties door toegankelijke alternatieven: knoppen, keyboard handlers en duidelijke instructies. Voor productrangschikking of carrousels altijd extra controls toevoegen.

HTML/JS-voorbeeld: <button aria-label="Verplaats item naar voren" class="move-up">▲</button> en bij drag-events: element.addEventListener('keydown', e => { if(e.key==='ArrowUp'){moveUp()} })

Mini-checklist:

  • Geen functie werkt alleen via slepen of swipen.
  • Alternatieven voor keyboard en schermlezers aanwezig.

Teststappen: controleer reorderings- en carrouselfunctionaliteit via toetsenbord en met een schermlezer (NVDA/VoiceOver).

Stap 5 — Toegankelijke authenticatie en checkout (3.3.7 Accessible Authentication)

Actie: verwijder onnodige CAPTCHAs of bied toegankelijke alternatieven (audio, e-maillinks, SMS met fallback). Maak wachtwoordvelden gebruiksvriendelijk: duidelijke fouten, ’toon wachtwoord’ button met aria-attributes en mogelijkheid tot passkey/social login als alternatief.

HTML-voorbeeld: <label for="pwd">Wachtwoord</label><input id="pwd" type="password" aria-describedby="pwd-hint"><button aria-pressed="false" aria-controls="pwd" onclick="togglePwd()">Toon

Mini-checklist:

  • CAPTCHA heeft toegankelijk alternatief of is optioneel.
  • Foutmeldingen zijn duidelijk en gekoppeld met aria-describedby.
  • Inlog- en betaalstappen werken volledig via toetsenbord en schermlezer.

Teststappen: doorloop registratie en checkout met alleen toetsenbord; test foutgevallen en herstel (foute card/invalid e-mail) en controleer ARIA-verbindingen.

Hoe test je dat?

Handmatige checklist voor quick-audit

  • Tab door pagina: focus zichtbaar, order logisch.
  • Mobiel testen: touch targets, geen swipe-only acties.
  • Formulieren: labels + aria-describedby, duidelijke foutfocus.
  • Authenticatie: geen onbruikbare CAPTCHA, show/hide wachtwoord werkt met toetsenbord.

Tools en concrete stappen

1) Draai onze WCAG checker/validator over product- en checkoutpagina's voor automatische fouten. 2) Installeer onze plugin om real-time alerts in CMS te krijgen (download link op wcagtool.nl/plugin). 3) Handmatige test: gebruik toetsenbord, NVDA/VoiceOver en Lighthouse voor performance/contrast. 4) Maak snapshots: voor en na wijzigingen om regressies te voorkomen.

Wanneer is dit extra belangrijk?

Prioriteer pagina’s met commercieel gewicht: homepage, productpagina's, categoriepagina's, winkelwagen, checkout, accountbeheer en meldingen (bijv. foutpagina's bij betaling). Voor campagnes en kortingen is toegankelijkheid cruciaal: bezoekers moeten aanbiedingen kunnen benutten zonder hapering.

Checklist per pagina

  • Homepage: belangrijke CTA's en zoekfunctie keyboard-vriendelijk en zichtbare focus.
  • Productpagina: varianten (size/color) bedienbaar zonder muis, afbeeldingen alt-teksten en beschrijvingen.
  • Checkout: volledige flow toetsenbord, toegankelijke betaalopties en duidelijke foutbehandeling.

Praktische integratie in je workflow

Integreer accessibility checks in pull requests: maak een checklist in tickets, voer onze WCAG checker uit in CI en laat designers specificaties leveren voor focus, spacing en states. Schrijf kleine user stories: "Als keyboardgebruiker wil ik X zodat ik Y kan doen".

Voorbeeld PR-checklist

  • Focus zichtbaar getest (y/n).
  • Touch-targets >= 44px (y/n).
  • ARIA aanwezig bij dynamische content (y/n).
  • WCAG checker rapport toegevoegd (y/n).

Tools, plugin en hulp

Gebruik onze WCAG checker/validator voor snelle geautomatiseerde scans en download de plugin om problemen vroeg in CMS te vangen. Zit je vast? Neem contact op via ons contactformulier — onze medewerkers reageren binnen 24 uur en helpen met prioritering, fixes en audits.

Laatste praktische tip: start met de vijf meest gebruikte pagina's in je webshop en pak per pagina één item uit de stappenlijst. Kleine iteraties (focus, targetgrootte, formulieren) hebben direct effect op conversie en klanttevredenheid. Gebruik de WCAG checker/validator na elke wijziging en installeer de plugin voor continue bewaking.