WCAG 2.2 voor webshops: wat je nú moet verbeteren

Geplaatst op door

WCAG 2.2 voor webshops: wat je nú moet verbeteren

Webshops verkopen producten, maar ze moeten ook toegankelijk verkopen. Met WCAG 2.2 komen er concrete eisen die veel voorkomende e-commerceproblemen adresseren: touch targets, zichtbare focus en alternatieve bediening. Voor designers, developers en redacties betekent dit dat kleine aanpassingen direct leiden tot meer klanten én minder afhakende bezoekers.

Dit artikel geeft praktische, technische en redactionele stappen om je webshop snel naar WCAG 2.2-niveau te brengen. Geen abstracte theorie maar checklists, HTML/ARIA/CSS-snippets en teststappen die je meteen kunt toepassen. Gebruik onze WCAG checker/validator op wcagtool.nl, download de plugin en neem contact op met onze medewerkers — we reageren op contactformulieren binnen 24 uur.

Wat betekent dit?

WCAG 2.2 bouwt voort op 2.1/2.0 en introduceert extra focus op bediening op touch- en kleine apparaten en zichtbaarheid van focus. Voor webshops vertaalt dat zich naar: grotere knoppen, duidelijke focus-indicatoren, betere toetsenbordnavigatie, minder plekken waar slepen of ingewikkelde gebaren nodig zijn en heldere foutafhandeling bij bestelformulieren.

Belangrijkste thema’s

  • Zichtbare focus (Focus Appearance) — focus moet goed zichtbaar en voldoende contrastrijk zijn.
  • Target size (doelgrootte) — interactieve elementen moeten groot genoeg op touch-apparaten of voldoende padding hebben.
  • Alternatieven voor slepen en complexe gebaren — zorg voor knoppen in plaats van alleen drag-and-drop.
  • Formulieren en fouten — labels, autocomplete en duidelijke foutmeldingen met aria-kenmerken.

Waarom dit belangrijk is

Een toegankelijkere webshop vergroot bereik, verlaagt supportkosten en vermindert juridische risico’s. Daarnaast verbetert toegankelijkheid vaak ook SEO: heldere structuren, alt-teksten, semantiek en snellere conversies. Voor jouw organisatie betekent het: meer klanten, betere merkperceptie en minder bounce.

Concrete voordelen per rol

  • Designers: consistentere UI-componenten, betere responsive-ervaring, eenvoudige design tokens voor focus en touch.
  • Developers: minder edge-cases, betere tests, herbruikbare componenten met juiste ARIA.
  • Redacties: heldere contentstructuur, ALT-teksten en foutberichten die conversies verhogen.

Direct toepassen

Hier zijn concrete verbeterpunten per onderdeel van je webshop, inclusief mini-checklists en codevoorbeelden die je direct in je componentbibliotheek kunt plakken.

Productlijsten & knoppen — checklist

  • Zorg dat elk product een toegankelijke naam heeft (semantisch <h2>/<h3> of aria-label waar nodig).
  • Product CTA’s (voeg toe aan winkelwagen, bekijk product) moeten keyboard-focus en aria-labels hebben.
  • Touch targets minimaal ~44×44 CSS-px of voldoende padding toepassen.

Button snippet (HTML + ARIA)

<button class="btn-add" aria-label="Voeg {{productNaam}} toe aan winkelwagen">Toevoegen</button>

Focus CSS-snippet

.btn-add:focus{outline:3px solid #005a9c;outline-offset:2px;border-radius:4px; box-shadow:none;} /* Zorg dat kleur en dikte voldoen aan focus appearance WCAG 2.2 */

Product cart update (ARIA live)

<div id="cart-status" role="status" aria-live="polite">1 artikel toegevoegd</div>

Formulieren — checklist

  • Alle velden moeten een zichtbaar label hebben of een aria-label/aria-labelledby.
  • Gebruik autocomplete waar mogelijk (shipping, credit-card, email).
  • Geef fouten aan met aria-invalid="true" en koppel fouttekst via aria-describedby.

Form error HTML voorbeeld

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

Mobiele targets CSS

.touch-target{min-width:44px;min-height:44px;padding:8px 12px;display:inline-flex;align-items:center;justify-content:center;} /* Verbeter taptargets zonder layout te breken */

Hoe test je dat?

Testen is essentieel. Gebruik onze WCAG checker/validator op wcagtool.nl voor geautomatiseerde checks, installeer de plugin voor directe feedback in je omgeving en loop daarna handmatige tests door.

Automatisch + handmatig testplan

  1. Automatisch: draai de WCAG checker/validator op iedere pagina (productpagina, checkout, account). Let op foutmeldingen rondom images, labels, kleurcontrast en ARIA.
  2. Handmatig keyboard-test: navigeer met Tab/Shift+Tab en controleer dat alle interactieve elementen bereikbaar zijn en dat de focusvolgorde logisch is. Test ook met Enter/Space en Escape.
  3. Screenreader-test: gebruik NVDA (Windows) of VoiceOver (macOS/iOS) en controleer productnavigatie, winkelwagen-updates en foutmeldingen (role=status/alert).
  4. Touch-test: test targetgrootte en swipe-vrije alternatieven op mobiel. Controleer dat belangrijke acties niet alleen via drag-and-drop uitgevoerd kunnen worden.
  5. Contrast-test: gebruik de kleurcontrasttool in de checker en controleer non-text contrast van focus indicators en grafische UI-elementen.

Concrete teststappen voor checkout

  • Vul een bestelling in met alleen toetsenbord. Kun je alle velden bereiken en bevestigen?
  • Introduceer een fout (foutief postcode) en controleer of de foutmelding automatisch focus krijgt of duidelijk geassocieerd is met het veld.
  • Controleer of pop-ups/modals toegankelijke focus-trap en aria-modal implementeren.

Wanneer is dit extra belangrijk?

Sommige pages en features vereisen strengere aandacht:

Checkout & betaalstromen

  • Elk obstakel in checkout verhoogt bounce; check targetgrootte, foutafhandeling en veilige, toegankelijke authenticatie.
  • Voeg extra tests toe voor betaling via mobiel: PIN/3DS flows moeten toetsenbord- en screenreadervriendelijk blijven.

Productconfigurators & configuratoren met drag/drop

  • Bied knoppen als alternatief voor slepen. Leg korte instructies zichtbaar neer en gebruik aria-describedby voor extra toelichting.

Promoties en tijdsdruk (flash-sales)

  • Waarschuw gebruikers voor vervaldata en maak het mogelijk die informatie via keyboard of screenreader te lezen (geen visuele-only timers).

Snelle checklist per rol

Designers

  • Maak focus-styles onderdeel van je design system.
  • Zorg voor consistente touch-grootte en spacing tokens.

Developers

  • Implementeer semantische HTML, ARIA alleen waar nodig en herbruikbare toegankelijke componenten.
  • Automatiseer checks in CI met onze WCAG validator/plugin.

Redactie

  • Schrijf duidelijke labels, foutmeldingen en ALT-teksten. Gebruik korte instructies voor formulieren.

Gebruik de WCAG checker/validator op wcagtool.nl voor sitebrede scans, download onze plugin voor continue feedback in je development workflow en vul ons contactformulier als je hulp wilt — onze medewerkers reageren binnen 24 uur.

Praktische tip: start met checkout en productpagina’s — verbeter daar focus, targetgrootte en foutafhandeling eerst. Run daarna de checker/validator, pak de hoogste impact items en automatiseer tests in je CI. Heb je vragen of wil je hulp bij implementatie? Gebruik de plugin of stuur een bericht via onze site; we helpen je binnen 24 uur.