WCAG 2.2: wat webshops nú moeten aanpassen

Geplaatst op door

WCAG 2.2: wat webshops nú moeten aanpassen

WCAG 2.2 brengt concrete eisen die veel impact hebben op webshops: knoppen moeten makkelijker te bedienen zijn, focus moet altijd zichtbaar en niet verborgen worden door overlays, slepen als enige interactie is geen optie en toetsenbordgebruik mag geen verrassingen bevatten. Wie deze punten nu regelt, voorkomt drempels voor klanten, juridische risico’s en supportkosten.

Dit artikel geeft designers, developers en redacties directe, praktische stappen: wat verandert, waarom het belangrijk is, hoe je het snel implementeert en exact hoe je het test — inclusief code-snippets, mini-checklists en concrete teststappen. Gebruik onze WCAG checker/validator en download onze plugin voor automatisering; bij vragen: vul het contactformulier in, wij reageren binnen 24 uur.

Wat betekent dit?

WCAG 2.2 richt zich op gebruiksvriendelijkheid voor mensen met motorische, visuele en cognitieve beperkingen. Voor webshops vertaalt dat zich naar een paar herkenbare eisen:

  • Aanraak- en klikgebieden: knoppen en tappable elementen moeten voldoende groot en ruim geplaatst zijn.
  • Focus en interactie: de focusindicator moet altijd goed zichtbaar zijn en mag niet verborgen worden door overlays of sticky headers.
  • Alternatieven voor slepen: functies die alleen via drag-and-drop werken, moeten ook via eenvoudige knoppen of toetsen toegankelijk zijn.
  • Toetsenbordtoegankelijkheid: alle functies moeten bedienbaar zijn zonder muis; sneltoetsen mogen niet onverwacht handelen en moeten uitschakelbaar zijn.
  • Duidelijke statusupdates: inhoud die dynamisch wijzigt (bijvoorbeeld winkelwagen-updates) moet voor schermlezers duidelijk worden gemeld.

Waarom dit belangrijk is

Praktisch: betere conversie, minder verlaten winkelwagens en minder vragen aan support. Juridisch: WCAG-naleving voorkomt claims en boetes. Moreel: iedereen moet kunnen bestellen zonder extra barrières.

Technisch: veel problemen ontstaan door kleine ontwikkelkeuzes — onduidelijke focusstijlen, custom controls zonder ARIA, of reliance op touch gestures. Oplossingen zijn vaak klein en clubhouse-proof: één CSS-regel, één ARIA-attribute of een extra knop kan al voldoende zijn.

Direct toepassen

Mini-checklist voor development (prioriteit)

  • Zorg voor voldoende target size: aim op minimaal 24×24 CSS-pixels voor touch, en 44×44 voor primaire acties waar mogelijk.
  • Voeg duidelijke focusstijlen toe: visible contrast, minimaal 3px rand of opvallende outline.
  • Altijd alternatieven aanbieden voor drag-and-drop: +/- knoppen, keyboard handlers.
  • Maak toetsenbordnavigatie compleet: tabbable sequence logisch, modals focus-trap, ESC close.
  • Gebruik ARIA correct: role=”dialog” met aria-modal=”true”, aria-labelledby, aria-describedby voor modals en alerts.

HTML/ARIA/CSS-snippets

Target size en hit-area uitbreiden (CSS):

<style>.btn { min-width:44px; min-height:44px; padding:10px; touch-action:manipulation; }</style>

Focusstijl (duidelijk en contrastrijk):

<style>:focus { outline:3px solid #005A9C; outline-offset:2px; } button:focus { box-shadow:0 0 0 3px rgba(0,90,156,0.2); }</style>

Modal met ARIA en focus management (HTML + korte JS):

<div role="dialog" aria-modal="true" aria-labelledby="modalTitle" id="cartModal"><h2 id="modalTitle">Winkelwagen</h2><button class="close" aria-label="Sluit" onclick="closeModal()">×</button>...</div><script>function openModal(){const m=document.getElementById('cartModal');m.style.display='block';m.querySelector('button, a, input').focus();}function closeModal(){const m=document.getElementById('cartModal');m.style.display='none'; document.querySelector('#openCartBtn').focus();}</script>

Alternatief voor drag-to-change quantity:

<div class="qty"><button aria-label="Aantal verlagen" class="dec">-</button><input aria-label="Aantal" value="1" type="number" min="1"><button aria-label="Aantal verhogen" class="inc">+</button></div>

Checklist voor content/redactie

  • Schrijf duidelijke, korte labels voor knoppen (geen alleen iconen zonder tekst). Voeg aria-labels toe als visuele tekst ontbreekt.
  • Beschrijf foutmeldingen expliciet en koppel deze aan velden via aria-describedby.
  • Update productpagina’s met keyboard-instructies als er custom interacties zijn (bijv. carrousels).

Hoe test je dat?

Automatische checks met onze WCAG checker/validator

Start met onze validator: snel inzicht in target size issues, ontbrekende ARIA attributes en contrastproblemen. Download onze plugin voor CI-integratie; laat builds falen bij regressies. De plugin detecteert o.a. onzichtbare focus-indicatoren en ontbrekende role/aria-attributen.

Handmatige teststappen (essentieel)

  1. Toetsenbord loop: navigeer een aankoopproces alleen met Tab, Shift+Tab, Enter, Space, pijltjestoetsen en ESC. Noteer ongerechtvaardigde focus loss of niet-bereikbare controls.
  2. Slaaptest: activeer schermlezer (NVDA/VoiceOver) en doorloop productpagina + winkelwagen. Controleer aria-live updates bij toevoegen/verwijderen producten.
  3. Touch simulatie: gebruik browser devtools om touch te simuleren en test hit-areas en gedrag bij zoom (browser zoom 200%).
  4. Slepen vermijden: test alle drag-functionaliteit; moet er altijd een +/– of toetsenbordoptie zijn? Zo niet: refactoren.

Snel scripts voor tests

// Eenvoudige focus-check in browser consoledocument.querySelectorAll('button,a,input,select,textarea,[tabindex]').forEach(el => { const s = window.getComputedStyle(el); if (s.outlineStyle==='none' && s.boxShadow==='none') console.warn('Mogelijk onzichtbare focus:', el); });

Wanneer is dit extra belangrijk?

Sommige plekken in een webshop krijgen extra prioriteit:

  • Betaalstroom en checkout: elke frictie zorgt voor verlaten winkelwagen. Focusloss of onduidelijke foutmeldingen zijn kostbaar.
  • Productconfigurators en maatwerk: complexe interacties vereisen toegankelijke alternatieven voor touch/drag en duidelijke instructies.
  • Mobiele gebruikers: target size en touch-action zijn hier cruciaal; veel klanten bestellen mobiel.
  • Promoties en pop-ups: zorg dat deze de focus niet verbergen of keyboard-toegang onderbreken.

Praktische voorbeelden

Sticky cookie-banner die focus blokkeert: maak de banner tabbable en voeg een duidelijke sluitknop met aria-label. Zodat toetsenbordgebruikers de banner kunnen bedienen zonder content te verliezen.

Productfoto carrousel alleen swipebaar: voeg “Volgende” en “Vorige” knoppen met duidelijke aria-controls en keyboard handlers.

Implementatie roadmap (1–4 weken)

  1. Week 1: Scan met onze WCAG checker/validator en plugin. Prioriteer issues op checkout en productpagina’s.
  2. Week 2: Quick wins: focus-stijlen, target-size CSS, toevoegen van +/- knoppen naast drag controls.
  3. Week 3: ARIA en modals: correct role/aria, focus trapping en ESC-gedrag.
  4. Week 4: Handmatige testen met toetsenbord en schermlezer; release fixes. Stel regressietests in CI met onze plugin.

Extra code-tips

Voorkom onverwachte keyboard shortcuts

Als je shortcuts aanbiedt, maak ze uitschakelbaar en kondig ze aan:

<button id="toggleShortcuts" aria-pressed="false">Sneltoetsen uit/aan</button><script>const state={enabled:true};document.getElementById('toggleShortcuts').addEventListener('click',e=>{state.enabled=!state.enabled; e.target.setAttribute('aria-pressed', String(state.enabled));});document.addEventListener('keydown',e=>{if(!state.enabled) return; if(e.key==='k' && (e.ctrlKey||e.metaKey)){/* actie */}});</script>

ARIA-live voor winkelwagen updates

<div aria-live="polite" id="cartStatus" class="visually-hidden"></div><script>function updateCartMsg(msg){document.getElementById('cartStatus').textContent=msg;}</script>

Hoe wij helpen

Gebruik onze WCAG checker/validator om snel te scannen en onze plugin voor integratie in uw workflow. Onze medewerkers helpen bij interpretatie, prioritering en technische implementatie — vul het contactformulier in en je krijgt binnen 24 uur antwoord.

Laat de plugin lopen in CI, voeg de handmatige teststappen toe aan je testplan en voer releases alleen uit als kritieke accessibility-blockers weg zijn. Kleine investeringen nu besparen conversieverlies later.

Tip: begin met checkout en mobiele primaire acties. Run onze checker, fix de top 5 issues, test handmatig met toetsenbord en schermlezer en rol gefaseerd uit. Voor hulp of een quick audit: download onze plugin of neem contact op; we reageren binnen 24 uur.