WCAG 2.2 voor webshops: de onmisbare compliance-check voor 2026

Geplaatst op door

WCAG 2.2 voor webshops: de onmisbare compliance-check voor 2026

WCAG 2.2 verandert niets aan het doel: digitale toegankelijkheid voor iedereen. Voor webshops betekent het concretere eisen rondom toetsenbordgebruik, zichtbare focus en mobiele toegankelijkheid — onderdelen die direct invloed hebben op conversie en juridische risico’s.

Dit artikel legt praktisch uit wáár je op moet letten, hoe je het snel test en welke code je direct kunt toepassen. Gericht op designers, developers en redacties: korte checklists, voorbeelden en concrete teststappen zodat je vandaag al kunt verbeteren.

Wat betekent dit?

WCAG 2.2 bouwt voort op 2.1 en voegt nieuwe succescriteria toe die vooral relevant zijn voor webshops: focus zichtbaarheid (2.4.11), toegankelijke labels en fouten in formulieren, voldoende targetgrootte (2.5.7) en redelijke timing voor interacties. Voor webshops zijn dit vaak productkaarten, zoekfilters, checkout-formulieren en mobiele interface-elementen.

Belangrijke nieuwe punten

  • Focus zichtbaarheid: interactieve elementen moeten altijd duidelijk zichtbaar zijn bij toetsenbordfocus.
  • Targetgrootte: knoppen en links moeten groot genoeg zijn, vooral op touchschermen.
  • Formulierfouten en hulp: inline foutmeldingen en suggesties moeten programmatically determinable zijn.

Waarom dit belangrijk is

Toegankelijkheid is zowel een ethische plicht als een zakelijk voordeel: betere SEO, meer klanten en minder juridische risico. Bezoekers die je site toegankelijk vindt, converteren vaker en hebben minder hulp nodig van support. Bovendien controleren steeds meer overheden en opdrachtgevers op WCAG-conformiteit.

Business impact

  • Hogere vindbaarheid: toegankelijke content is beter indexeerbaar door zoekmachines.
  • Minder supportkosten: duidelijkere forms en flows verminderen foutmeldingen en afgebroken checkouts.
  • Wettelijke aansprakelijkheid: proactief werken voorkomt claims en boetes.

Direct toepassen

Hier vind je concrete, direct toepasbare stappen per discipline.

Designers — checklists & patterns

  • Maak een duidelijke focusstijl: geen alleen-dunne rand, maar contrastrijke outline en licht voorgrondeffect.
  • Zorg voor voldoende contrast: tekst contrast >= 4.5:1 voor body-tekst, 3:1 voor grote tekst.
  • Plan targetgrootte: minimale touch target ≈ 44×44 CSS pixels of voeg padding toe.

Developers — HTML/ARIA/CSS snippets

Skiplink (direct bovenaan):

<a class="skip-link" href="#main">Naar inhoud</a>

Toegankelijke productkaart: alt-tekst patroonsuggestie

<article class="product"><img src="..." alt="Merk Model – kleur – maat" /><h2>Productnaam</h2><p class="price">€XX</p></article>

Keyboard focus CSS (WCAG 2.4.11):

.focus-visible:focus { outline: 3px solid #005fcc; box-shadow: 0 0 0 3px rgba(0,95,204,0.15); }

ARIA voor formulierfout (programmatically determinable):

<label for="email">E-mail</label><input id="email" name="email" aria-invalid="true" aria-describedby="email-error" /><div id="email-error">Vul een geldig e-mailadres in</div>

Redacties — content & SEO

  • Alt-teksten beschrijven het product inclusief functionele kenmerken (kleur, maat), niet alleen “afbeelding”.
  • Gebruik duidelijke kopstructuur: H1 per pagina, H2 voor belangrijke secties, H3 voor sub-items.
  • Schrijf korte, actiegerichte linkteksten (geen “klik hier”).

Hoe test je dat?

Combineer geautomatiseerde checks met handmatige testen. Onze WCAG checker / validator op wcagtool.nl/validator pakt veel snelle issues, maar handmatige toetsen zijn essentieel voor keyboardgebruik, screenreaders en mobiele touch targets.

Snelle teststappen (developers)

  1. Run de validator: https://wcagtool.nl/validator — los alle medium en high issues op.
  2. Keyboard-only navigatie: navigeer alle flows (zoeken, filteren, product toevoegen aan winkelwagen, checkout) zonder muis. Noteer gebroken focus en verborgen controls.
  3. Screenreader-run: met NVDA/VoiceOver check je leesvolgorde, labels en foutmeldingen.
  4. Mobiele test: controleer touch targets en zoomgedrag op iOS/Android.

Checklist (quick)

  • Alle interactieve elementen zichtbaar bij focus — ja/nee
  • Alt-teksten aanwezig en functioneel — ja/nee
  • Formulierfouten zijn programmatically determinable — ja/nee
  • Contrast doorlopend >= 4.5:1 — ja/nee

Wanneer is dit extra belangrijk?

Prioriteer WCAG 2.2 bij:

  • Checkout en betaalprocessen — elk obstakel vermindert conversie direct.
  • Productfilters en zoekfilters — onzichtbare focus of slechte labels -> verloren klanten.
  • Mobiele eerste ervaring — steeds meer klanten shoppen mobiel.

Specifieke risicovelden

  • Custom widgets: carrousels en dropdowns die niet functioneel zijn via toetsenbord.
  • Dynamische updates (AJAX): schermlezers moeten op de hoogte worden gebracht met ARIA-live waar nodig.
  • Third-party checkout of payment widgets: verifiëren dat deze ook toegankelijk zijn, of vraag leverancier om verklaring.

Praktische workflows en prioritering

Werk iteratief: maak een prioriteitenlijst op basis van impact (checkout > productpagina’s > CMS-backend). Gebruik onze WCAG checker als eerste scan, implementeer fixes in sprints en laat elke release een korte regressietest ondergaan.

Voorbeeld sprint backlog

  • Sprint 1: alle focus-styles en skiplink implementeren; validator-run
  • Sprint 2: formulieren — aria-describedby & foutmeldingen correct
  • Sprint 3: mobile touch targets en contrastcheck doorvoeren

Tools & resources

Laatste praktische tip: start met de checkout en de meest gebruikte zoek- en filterflows; voer eerst één korte, meetbare wijziging per sprint uit (bijv. focus-states + aria-describedby voor foutmeldingen) en meet impact op conversie en supportverzoeken. Gebruik onze WCAG checker voor een snelle scan en download de plugin om scans te automatiseren — en neem contact op als je een audit of hands-on hulp wilt; we reageren binnen 24 uur.