WCAG 2.2 en webshops: wat je nú moet weten

Geplaatst op door

WCAG 2.2 en webshops: wat je nú moet weten

WCAG 2.2 verandert de spelregels voor toegankelijkheid en raakt webshops direct: van zoekfilters en productkaarten tot checkouts en mobiele touch-interacties. Voor designers, developers en redacties betekent dit concrete aanpassingen die de conversie en gebruikerservaring verbeteren én juridische risico’s verkleinen.

In dit artikel leggen we compact en praktisch uit welke aandachtspunten voor webshops van grootste impact zijn, hoe je ze direct kunt toepassen en hoe je ze test. Geen vaagheden: korte checklists, code-snippets en teststappen zodat je morgen kunt beginnen.

Wat betekent dit?

WCAG 2.2 scherpt aandachtspunten aan die specifiek belangrijk zijn voor interactieve interfaces en mobiele gebruikservaringen. Verwacht meer aandacht voor zichtbare focus, beter werkende touch-targets, alternatieven voor sleepbewegingen en robuuste authenticatie/checkout-opties. Voor webshops vertaalt dat zich naar betere keyboardbediening, duidelijke focusindicatoren, grotere klik-/tik-oppervlakken en toegankelijke foutafhandeling in betaalflows.

Waarom dit belangrijk is

Toegankelijkheid is niet alleen compliance: het vergroot bereik, vermindert calls naar support en verhoogt conversie. Klanten met een beperking zijn loyaal en spenderen; als jouw checkout soepel en duidelijk werkt voor iedereen, daalt het aantal afgebroken bestellingen. Daarnaast beperken toegankelijke sites juridische risico’s en tonen ze maatschappelijk verantwoord ondernemen.

Direct toepassen

Checklist: quick wins voor webshops

  • Zorg voor zichtbare focus (contrasterende rand + voldoende dikte).
  • Maak interactieve elementen groot genoeg voor touch (minimaal ~44×44 CSS-px where practical).
  • Label alle formuliervelden met <label for> en gebruik aria-invalid/aria-describedby bij fouten.
  • Voeg skip-links en logisch voederende tabbalken toe (taborder overeenkomend met visuele volgorde).
  • Vervang waar mogelijk drag-only interactions door alternatieven (buttons/checkboxes/selects).

HTML/ARIA snippets: productkaart en add-to-cart

<article class="product" aria-labelledby="p-title-123"><h2 id="p-title-123">Productnaam</h2><button class="add-to-cart" aria-label="Voeg Productnaam toe aan winkelwagen">In winkelwagen</button></article>

Voeg aria-live region toe voor winkelwagen-updates:

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

CSS-snippets: zichtbare focus & touch targets

.focus-visible:focus{outline:3px solid #ffb347;outline-offset:2px;border-radius:3px}button, .clickable{min-width:44px;min-height:44px;padding:8px 12px;touch-action:manipulation}

Formulieren en betaalflow

Voor elk invoerveld: label + id + duidelijke foutmelding. Bied alternatieve authenticatie (bijvoorbeeld magic links of verificatiecodes) zodat gebruikers die problemen hebben met CAPTCHA of toetsenborden niet vastlopen.

<label for="email">E-mail</label><input id="email" name="email" type="email" aria-describedby="email-error"><div id="email-error" role="alert">Voer een geldig e-mailadres in</div>

Hoe test je dat?

Keyboard-first testen

  1. Navigeer de hele site zonder muis: alle interactieve elementen moeten focus krijgen en werkbaar zijn (ook modals, dropdowns, carrousels).
  2. Controleer logische tabvolgorde; visuele volgorde = tabbalk volgorde.

Screenreader testen

  1. Gebruik NVDA/VoiceOver: test productlijst, detailpagina, en checkout. Luister of labels, buttons en foutmeldingen kloppen.
  2. Controleer aria-live updates (winkelwagen, foutmeldingen) en focusverplaatsing naar nieuwe content.

Mobiel/touch testen

  1. Test met vinger: zijn targets voldoende groot en is er geen overlap van klikbare elementen?
  2. Test touch-alternatieven voor drag/drop of swipe-only functies.

Geautomatiseerd testen

Gebruik onze WCAG checker / validator voor snelle scans, maar combineer altijd met handmatige testen. Download ook onze plugin van wcagtool.nl/plugin om checks lokaal in je CI-pipeline te integreren.

Wanneer is dit extra belangrijk?

Betaalproces en checkout

Betaalpagina’s verliezen de meeste klanten bij verwarring of technische barrières. Zorg voor voorspelbare focus na het afhandelen van fouten, alternatieve betaalmethoden, en geen onnodige timeouts of CAPTCHAs zonder alternatief.

Productconfigurators en interactieve widgets

Widgets die op canvas, drag/drop of complexe AR/3D interfaces gebruiken, hebben altijd een toegankelijke fallback (form-based configurator, keyboardbediening, tekstuele beschrijving).

Promoties, pop-ups en overlays

Zorg dat overlays focus-trap correct instellen en sluiten via Esc; houd inhoud achter overlay toegankelijk voor screenreaders indien relevant.

Concrete teststappen (kort)

  1. Start met een quickscan in de WCAG checker.
  2. Loop alle kritische funnels handmatig door (zoeken → product → winkelwagen → checkout).
  3. Voer keyboard-only en screenreader-tests uit op desktop en mobiel.
  4. Pas CSS/JS aan: zichtbare focus, touch-targets, aria-attributes, en test opnieuw.
  5. Automatiseer regressietesten met onze plugin (download).

Handige korte code-voorbeelden

Skip-link

<a class="skip-link" href="#main-content">Direct naar inhoud</a>

Focus-management bij modals

const modal = document.querySelector('#modal');modal.addEventListener('shown', ()=>{modal.querySelector('button, [href], input').focus();});

Target-size helper CSS

.big-tap{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;}

Tools en resources

Gebruik onze WCAG checker / validator voor eerste scans en de plugin om toegankelijkheidschecks in je development workflow te automatiseren. Wil je een review of hulp bij implementatie? Neem contact op via ons contactformulier — onze medewerkers reageren binnen 24 uur.

Laat praktijk leidend zijn: implementeer kleine verbeteringen (focus, labels, target-size) eerst, meet resultaat en breid uit naar complexere flows zoals configurators en authenticatie. Tip: plan toegankelijkheidssprints van één dag per release zodat toegankelijkheid geen one-off wordt.