WCAG 2.2 voor webshops: wat je vandaag écht moet regelen

Geplaatst op door

WCAG 2.2 voor webshops: wat je vandaag écht moet regelen

WCAG 2.2 verandert praktische eisen die direct invloed hebben op conversie en gebruiksgemak van webshops. Als designer, developer of redacteur moet je vandaag al weten welke onderdelen van je productpagina’s, check-out en interactieve componenten extra aandacht vragen—zodat klanten altijd kunnen bestellen, ongeacht assistive technology of inputmethode.

Dit artikel focust op concrete acties: welke nieuwe WCAG 2.2-onderdelen relevant zijn voor webshops, hoe je ze technisch oplost en hoe je ze efficiënt test. Gebruik onze WCAG checker / validator en download de plugin voor snelle scans; voor advies kun je altijd contact opnemen met onze medewerkers (antwoord binnen 24 uur).

Wat betekent dit?

WCAG 2.2 voegt succescriteria toe die veelal gaan over focus, targets en touch-interfaces. Voor webshops betekent dat: betere keyboardbedienbaarheid, duidelijke focusindicatoren, grotere aanraakdoelen en alternatieven voor drag-gestures. In de praktijk: klanten moeten producten kunnen selecteren, aantallen aanpassen en betalen zonder muis of complexe gebaren.

Belangrijkste wijzigingen (kort)

  • Focus Appearance en focus niet verborgen: focus moet altijd duidelijk zichtbaar blijven.
  • Target Size / Pointer Target Spacing: touch targets moeten groot genoeg of voorzien van alternatieven.
  • Alternatieven voor drag-gestures: slepen mag geen enige manier zijn om functies uit te voeren.
  • Andere relevante verbeteringen: betere feedback bij fouten en consistente focusvolgorde.

Waarom dit belangrijk is

Strikt genomen is het voldoen aan WCAG belangrijk voor wettelijke toegankelijkheid en minder barrières voor klanten. Praktisch gezien leidt goede toegankelijkheid tot minder frictie in het bestelproces, minder afgebroken bestellingen en een grotere doelgroep. Bovendien voorkomt het kostbare nazorg en reputatieschade bij klachten.

Zakelijke impact

  • Minder calls naar klantenservice bij betaalproblemen of onvindbare knoppen.
  • Hogere conversie door betere keyboard- en mobiele ondersteuning.
  • Lagere juridische risico’s door naleving van toegankelijkheidseisen.

Direct toepassen

Hier vind je concrete wijzigingen die je vandaag kunt doorvoeren. Gebruik onze WCAG checker / validator als eerste stap en installeer de plugin voor je CMS om snel foutklassen te markeren.

Focus goed zichtbaar maken (CSS)

Voeg een consistente, contrasterende focusstijl toe die ook met hoge contrastmodus werkt. Voorbeeld CSS:

:focus{outline:3px solid #ffb300;outline-offset:2px;box-shadow:0 0 0 4px rgba(255,179,0,0.15);}

Mini-checklist focus

  • Focus zichtbaar voor alle interactieve elementen (links, buttons, form controls).
  • Focus niet verborgen door overlays of sticky header.
  • Test op verschillende achtergronden en bij zoom.

Touch targets en target spacing

Zorg dat knoppen en belangrijke links via touch eenvoudig raakbaar zijn. Mogelijke oplossingen: vergroot padding, gebruik expliciete touch-helpers of bied alternatieve niet-drag bediening.

.btn{min-width:44px;min-height:44px;padding:10px 14px;touch-action:manipulation;}

  • Mini-checklist target size: targets >=24 CSS-px (of alternatieven zoals vergrootbare klikgebieden).
  • Spacing tussen targets advies: minimaal 8–16px afhankelijk van ontwerp.

Alternatieven voor drag-gestures

Als je items sleept (bijvoorbeeld sorteren of verplaatsen tussen lijsten), bied altijd een knop of menu als alternatief.

<button class="move-up" aria-label="Verplaats omhoog">↑</button>

  • Mini-checklist drag: altijd ten minste één niet-drag bediening aanwezig.

Accessible add-to-cart en statusmeldingen

Update cart-actie via een live region zodat screenreadergebruikers direct feedback krijgen zonder focusverlies.

<div id="cart-status" aria-live="polite" aria-atomic="true" class="visually-hidden">Product toegevoegd</div>

Visually hidden CSS:

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

Hoe test je dat?

Combineer geautomatiseerde scans (gebruik onze WCAG checker / validator en de plugin) met gerichte handmatige tests. Hieronder concrete teststappen per onderdeel.

Focus en keyboard tests

  1. Schakel muis uit of leg deze weg; navigeer alleen met Tab/Shift+Tab.
  2. Controleer dat alle interactieve elementen bereikbaar zijn en in logische volgorde.
  3. Controleer visuele focus op alle achtergronden en bij zoom (200%).

Touch en target tests

  1. Test op echte apparaten: probeer knoppen te raken met duim en korte tikken.
  2. Controleer spacing door twee targets naast elkaar aan te raken—mag niet per ongeluk de ander activeren.

Screenreader en dynamic content

  1. Gebruik NVDA (Windows) of VoiceOver (macOS/iOS) om check-out flow te doorlopen.
  2. Voeg product toe; controleer of de live region de update aankondigt.
  3. Controleer ARIA-roles en labels: elke knop en formuliercontrol heeft een betekenisvolle accessible name.

Automatisch + handmatig

Onze WCAG checker / validator werkt snel voor inzetbare issues (contrast, ontbrekende alt-teksten, ARIA-fouten). Gebruik daarna de plugin voor integratie in je development workflow en plan handmatige sessies met echte gebruikers of testers met assistive tech.

Wanneer is dit extra belangrijk?

Sommige delen van een webshop zijn kritischer voor toegankelijkheid—start daar eerst met reparaties.

Kritieke pagina’s en flows

  • Productpagina’s: productvarianten, afbeeldingen, alternatieve teksten, add-to-cart.
  • Winkelwagen en check-out: formulierlabels, foutmeldingen, orderbevestiging, betaalmethodes.
  • Accountbeheer en bestelgeschiedenis: navigatie, focus volgorde, leesbaarheid.

Situaties met verhoogd risico

  • Promotiebanners die interfaces verbergen (check focus niet obscured).
  • Dynamic content zonder ARIA-live of status-updates.
  • Complexe widgets zoals maatwijzers, product-configurators en carrousels.

Prioriteer fixes op basis van impact: check-out flows eerst, productpages daarna, decoratieve delen als laatste.

Handige voorbeelden en snippets

Voorbeeld: toegankelijke productvariant selector

HTML-structuur en aria voor een radio-achtige variant selector:

<div role="radiogroup" aria-label="Kleur"><button role="radio" aria-checked="false" tabindex="0">Rood</button><button role="radio" aria-checked="true" tabindex="-1">Blauw</button></div>

Voorbeeld: foutmelding bij betaling

Laat fouten semantisch en programmatic zichtbaar zijn:

<div id="payment-error" role="alert">Controleer uw kaartnummer</div>

Snelle audit-checklist voor developers

  • Alt-tekst voor productafbeeldingen: altijd beschrijvend, geen “image”.
  • Formulieren: label gekoppeld aan input via for/id.
  • Knoppen: duidelijke tekst, geen alleen-icoon zonder accessible name.
  • Keyboard: alle acties kunnen zonder muis worden uitgevoerd.
  • Live regions: gebruik aria-live voor cart updates en foutmeldingen.

Gebruik onze WCAG checker / validator om bovenstaande checklist automatisch te doorlopen en installeer de plugin voor alerts in je CMS.

Wil je hulp? Download de plugin, laat een scan lopen en neem contact op via het formulier—onze medewerkers reageren binnen 24 uur. Praktische tip: start met één kritieke flow (bijvoorbeeld check-out) en voer een korte usability-scan uit met keyboard- en screenreader-tests; fix de top 5 issues en draai daarna opnieuw de automatische scan met onze checker.