Webshops & WCAG 2.2: Klaar voor de nieuwe toegankelijkheidseisen?

Geplaatst op door

Webshops & WCAG 2.2: Klaar voor de nieuwe toegankelijkheidseisen?

WCAG 2.2 verandert weinig in de basisprincipes, maar voegt concrete eisen toe die vooral webshops raken: betere focusindicatoren, grotere aanraakdoelen en minder afhankelijkheid van slepen of complexe gebaren. Voor online winkels betekent dat direct toepasbare aanpassingen in design, frontend-code en redactionele workflows.

Dit artikel helpt designers, developers en redacties praktisch aan de slag te gaan: wat is er precies nieuw of aangescherpt, waarom het prioriteit heeft en welke concrete code, checklists en teststappen je direct kunt inzetten. Gebruik onze WCAG checker/validator, download onze plugin of neem contact op — we reageren binnen 24 uur op contactformulieren.

Wat betekent dit?

WCAG 2.2 richt zich op gebruiksvriendelijkheid voor mensen met motorische en cognitieve beperkingen en op zichtbare focus voor toetsenbordgebruikers. Voor webshops vertaalt zich dat in heldere aanknopingspunten:

  • Beter zichtbare focusstijlen zodat shoppers duidelijk weten waar hun toetsenbordfocus staat.
  • Grotere of beter gespaarde touchtargets voor knoppen en links (voorkom tiny click-gebieden).
  • Alternatieven voor drag-&-drop, swipe carrousels en andere gebaren die moeilijk zijn voor sommige gebruikers.
  • Duidelijke labels, foutmeldingen en instructies bij formulieren (afrekenen, adres, couponcodes).

Waarom dit belangrijk is

Toegankelijke webshops bereiken meer klanten, verminderen aanvraag- en retourgedrag door verwarring en beperken juridische risico’s. Praktisch: klanten met motorische of visuele beperkingen verlaten een koopproces sneller als knoppen slecht te vinden of te klein zijn.

Direct toepassen

Designers: richtlijnen en mini-checklist

  • Focus: gebruik een goed zichtbaar contrast en minimaal 3px rand of duidelijke outline — test ook bij zoom 200%.
  • Touch targets: minimaal 44×44 CSS px aanbeveling, of voldoende padding/afstand tussen targets.
  • Alternatieven voor drag: voeg zichtbare “Voeg toe”-knoppen, toetsenbordbediening en aria-activedescendant toe waar relevant.
  • Formulieren: labels altijd gekoppeld via <label for=”…”>, geef inline voorbeeldwaarden en expliciete foutvoorstellen.

Developers: CSS-snippets voor focus en touchtargets

.focus-visible:focus { outline: 3px solid #005a9c; outline-offset: 2px; border-radius: 4px; } /* Gebruik :focus-visible waar mogelijk */ .btn { min-width: 44px; min-height: 44px; padding: 0.5rem 1rem; } .clickable { touch-action: manipulation; }

Tip: combineer outline met box-shadow voor hoge contrastvarianten en zorg dat de focuskleur niet alleen op kleur gebaseerd is (voeg een zichtbare vorm toe).

Praktische HTML/ARIA-samples

<button aria-label="Voeg "Blauwe Trui" toe aan winkelwagen" class="btn add-to-cart">Toevoegen</button> <label for="postcode">Postcode</label> <input id="postcode" name="postcode" aria-describedby="postcode-hint" /> <div id="postcode-hint">Vul 1234AB in zonder spatie</div>

Modal / dialog: focus management (kort)

// Basale trap-focus logica (concept) const focusable = 'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'; const modal = document.querySelector('.modal'); const elements = Array.from(modal.querySelectorAll(focusable)); modal.addEventListener('keydown', e => { if (e.key === 'Tab') { const index = elements.indexOf(document.activeElement); if (e.shiftKey && index === 0) { elements[elements.length-1].focus(); e.preventDefault(); } else if (!e.shiftKey && index === elements.length-1) { elements[0].focus(); e.preventDefault(); } } });

Hoe test je dat?

Stappen voor developers

  1. Run de pagina door onze WCAG checker/validator (startpunt) en noteer high-severity issues.
  2. Gebruik toetsenbord: tab, shift+tab, enter, spatie, pijltjestoetsen. Kun je alle knoppen en formulieren bedienen zonder muis?
  3. Zoom naar 200% (browser zoom) en controleer layoutbreuk en focuszichtbaarheid.
  4. Mobiel: test met schermvergroting en met éénhandbediening; controleer aanrakingstargets en alternatieven voor slepen.
  5. Screenreader test (NVDA/VoiceOver): lees formulierstappen en knoppen voor; kloppen labels en foutmeldingen?

Stappen voor designers en redacties

  • Controleer alle productafbeeldingen op beschrijvende alt-tekst. Geen ‘image-123.jpg’ als alt.
  • Linktekst: gebruik beschrijvende linktekst (“Lees specificaties” i.p.v. “klik hier”).
  • Content: beknopt in instructies bij betaalstappen, geef voorbeeldwaarden en duidelijke foutoplossingen.

Automated + manual

Automated tools (inclusief onze WCAG checker) vangen veel problemen, maar toetsenbordnavigatie, focuslogica, en bruikbaarheidstests met echte gebruikers moet je handmatig doen. Gebruik onze plugin om issues binnen je CMS te markeren en snel te verhelpen.

Wanneer is dit extra belangrijk?

Prioriteer deze aanpassingen als je webshop veel transacties heeft via mobiele bezoekers, als je uitgebreide productconfigurators of drag-&-drop-widgets gebruikt, of als je behoefte hebt aan juridische naleving of overheidsaanbestedingen.

Specifieke scenario’s

  • Product carrousels: zorg voor pauze/stop-knoppen, toetsenbordnavigatie en zichtbare focus voor elk item.
  • Checkout flows: elk stap moet volledig via toetsenbord af te ronden zijn; foutmeldingen moeten duidelijk en programmatic focus krijgen (aria-live of focus naar foutvlak).
  • Filters en facetnavigatie: maak ze keyboardvriendelijk en zorg dat drukbare items voldoende groot en afstandelijk zijn.

Checklists & korte tests die je vandaag kunt doen

Quick checklist voor developers

  • Alle interactieve elementen bereikbaar via Tab (geen tabindex>0 missers).
  • Focus zichtbaar en voldoet ook bij hoge zoom.
  • Touchtargets ≥ 44px of visueel voldoende padding/ruimte.
  • Alternatief voor drag-&-drop of swipe aanwezig.
  • Formulierlabels en foutmeldingen gekoppeld en duidelijk.

Quick checklist voor redacties

  • Alt-teksten geïmplementeerd en beschrijvend.
  • Producttitels en prijzen in semantische HTML (h1/h2 waar logisch).
  • Linkteksten beschrijvend en zonder ‘klik hier’.
  • CTA-teksten duidelijk (bijv. “Bestel nu” i.p.v. “OK”).

Concrete teststappen (kort)

  1. Open productpagina, tab door alle elementen — noteer focusverlies of onzichtbare focus.
  2. Probeer afrekenen alleen met toetsenbord — lukt betalen zonder muis?
  3. Activeer carrousel; pauze en navigeer via toetsenbord.
  4. Voer foutieve invoer in formulier; staat focus op foutmelding en bevat deze instructie voor correctie?
  5. Laat door onze WCAG checker/validator scannen en download rapport; volg quick-fixes uit de plugin.

Praktische code-snelkoppelingen

Visuele focus (aangepast voor hoge contrasten)

:focus-visible { outline: 3px solid #ffb800; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(255,184,0,0.15); }

Grotere klikgebieden zonder layout te breken

.icon-only { padding: 0.75rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

Toegankelijke foutmelding

<div role="alert" aria-live="assertive" class="error">Gebruik een geldige postcode in het formaat 1234AB</div>

Laatste praktische tip

Begin met de checkout en de meest gebruikte interacties: focus, touchtargets en formulieren. Gebruik onze WCAG checker/validator om snel een prioriteitenlijst te maken, download de plugin voor integratie in je CMS en neem contact op met onze medewerkers als je vragen of complexe componenten hebt — we reageren op contactformulieren altijd binnen 24 uur.