WCAG 2.2: wat webshops en websites vandaag nog moeten aanpassen

Geplaatst op door

WCAG 2.2: wat webshops en websites vandaag nog moeten aanpassen

WCAG 2.2 brengt praktische, direct te testen eisen die vooral ontwerpers, developers en redacties raken: betere focus, grotere aanraakvlakken, duidelijkere toetsenbordbediening en alternatieven voor drag-bewegingen. Voor webshops betekent dat minder afhakers, minder klantvragen en een groter bereik; voor contentteams betekent het minder juridische risico en betere vindbaarheid.

Dit artikel is een compacte, actiegerichte handleiding: wat er verandert, waarom het telt en precies wat je vandaag kunt aanpassen — inclusief checklists, code-snippets en teststappen. Gebruik onze WCAG checker/validator op wcagtool.nl, download onze plugin voor continue controle of neem contact op; onze medewerkers reageren binnen 24 uur.

Wat betekent dit?

WCAG 2.2 bouwt voort op 2.1 en voegt aandachtspunten toe die veel voorkomende problemen oplossen waar gebruikers vandaag de dag op stuiten. Denk aan:

  • Betere zichtbaarheid en gedrag van de focusindicator bij toetsenbordnavigatie.
  • Grotere en betrouwbaardere touch- en klikgebieden (voor mobiele apps en responsive sites).
  • Alternatieven voor drag-en-drop en complexe pointergebaren.
  • Verantwoordelijkheid voor toetscombinaties en timeouts — gebruikers moeten functies kunnen uitzetten of meer tijd krijgen.

Belangrijk voor wie?

  • Designers: pas componenten en states aan (focus, hover, pressed) en controleer spacing/touch targets.
  • Developers: implementeer ARIA, keyboard events en fallback-controls; test met schermlezers en toetsenbord alleen.
  • Redacties: controleer contentstructuur, focusvolgorde en formulieren; beperk inline scripts die focus verstoren.

Waarom dit belangrijk is

Toegankelijkheid is geen ‘nice-to-have’. Het verbetert conversie, zoekmachine-optimalisatie en klanttevredenheid. Specifieke voorbeelden voor webshops:

  • Onzichtbare focus: klanten missen ‘Toevoegen aan winkelwagen’ als ze via keyboard navigeren — directe omzetimpact.
  • Te kleine knoppen op mobiel: onjuiste aankopen of verlaten winkelwagen.
  • Drag-only productconfigurators: onbruikbaar voor veel toetsenbord- en schermlezergebruikers.

Gebruik onze WCAG checker/validator op wcagtool.nl om prioriteiten te bepalen en onze plugin om regressies te voorkomen.

Direct toepassen

Snelle checklist (direct toepassen)

  • Focus zichtbaar en niet verborgen bij modals en fixed headers.
  • Toegankelijke alternatieven voor drag/drop en multi-touch gestures.
  • Minimaal bruikbare klik-/touch-gebieden, of padding/hit-area uitbreiden.
  • Mogelijkheid om toetsenbordshortcuts uit te schakelen of te remappen.
  • Timeouts: waarschuwing en mogelijkheid tot verlengen of herstarten door gebruiker.

Focus: CSS-snippet

/* duidelijke, contrastrijke focusring voor alle interactieve elementen */:focus{outline:3px solid #005fcc;outline-offset:2px;box-shadow:0 0 0 4px rgba(0,95,204,0.12);border-radius:4px}button:focus, a:focus{outline-offset:3px}

Focus niet kwijt door fixed header: JS-snippet

// scroll en offset compenseren bij focus op anchorsconst headerOffset = 80;document.addEventListener('focusin', (e)=>{const el = e.target;if(el.matches('a[href^="#"]')){setTimeout(()=>{const rect = el.getBoundingClientRect();window.scrollBy({top: rect.top - headerOffset, left: 0, behavior: 'smooth'});},0);}});

Touch target vergroten (CSS)

/* vergroot hit-area zonder layout te breken */.small-icon{position:relative} .small-icon > a{display:inline-block;padding:10px;margin:-10px}

Wil je dit niet handmatig? Gebruik onze plugin samen met de wcagtool.nl validator om rapporten per pagina te krijgen.

Hoe test je dat?

Teststappen: toetsenbord-only

  1. Schakel muis of trackpad uit (of probeer alleen Tab/Shift+Tab/Enter/Space/Arrow keys).
  2. Navigeer door hoofdinteractieve elementen: header, navigatie, productlijst, filters, productpagina, checkout. Noteer waar focus verdwijnt of overslaat.
  3. Open modals en dropdowns: kan je ze sluiten met Esc en terug naar de onderliggende context gaan?
  4. Controleer foutmeldingen bij formulieren: worden ze toegankelijk gecommuniceerd via ARIA live regions of inline error-teksten met id-referenties?

Teststappen: schermlezer

  1. Test met NVDA (Windows) en VoiceOver (macOS/iOS). Probeer productselecties, filteren en checkout-processen.
  2. Luister of labels, headings en buttons logisch zijn; controleer role/aria-attributes op custom components.

Automatisch + handmatig

Start met een automatische scan (gebruik onze WCAG checker/validator op wcagtool.nl), fix de gemarkeerde issues en voer daarna de handmatige toetsenbord- en schermlezerchecks uit. Onze plugin integreert in CI/CD pipelines zodat regressies vroeg opdduiken.

Wanneer is dit extra belangrijk?

Sommige pagina’s vragen extra aandacht omdat ze conversie-high-impact of juridisch kritisch zijn.

Prioriteit voor webshops

  • Productpagina’s en winkelwagen: focus en actieknoppen moeten altijd beschikbaar en duidelijk zijn.
  • Checkout- en betaalpagina’s: toetsenbordtoegankelijkheid, foutmeldingen, en timeouts hebben prioriteit.
  • Mobiele checkout: vergroot touch targets en zorg voor alternatieven voor swipen/draggen.

Prioriteit voor contentrijke sites

  • Formulieren voor aanvragen, contracten of zorginformatie: duidelijke labels, focus management en geen keyboard traps.
  • Interne tools en dashboards: toetsenbordnavigatie en shortcut-beheer zijn cruciaal voor productiviteit en toegankelijkheid.

Concrete voorbeelden & implementatie

Alternatief voor drag & drop

Maak een extra knop of menu dat dezelfde actie triggert als drag/drop. Voor een productconfigurator:

div.draggable{touch-action:none}

Toetscombinaties: aan/uit schakelen

// voorbeeld: allow users to disable custom keyboard shortcutsconst shortcutsEnabledKey = 'shortcuts-enabled';if(localStorage.getItem(shortcutsEnabledKey)!=='false'){document.addEventListener('keydown', handleShortcuts)}function handleShortcuts(e){if(e.ctrlKey && e.key==='k'){e.preventDefault();openSearch();}}// user can toggle in settingslocalStorage.setItem(shortcutsEnabledKey,'false');

Timeouts: waarschuwing en verlengknop

// toon waarschuwing 1 minuut voor timeout en bied 'verlengen' buttonsetTimeout(()=>{showTimeoutWarning();}, sessionExpires - 60000);function showTimeoutWarning(){const el = document.createElement('div');el.innerHTML='Je sessie verloopt binnen 60 seconden. ';document.body.appendChild(el);document.getElementById('extend').addEventListener('click', extendSession);}

Wil je een kant-en-klare implementatie? Gebruik onze plugin en run een scan met de wcagtool.nl validator — we geven concrete code- en designadviezen per issue.

Extra praktische checklist per rol

Designer

  • Zorg voor duidelijke focus-states in het design system.
  • Ontwerp klik-/touchvakken, niet alleen zichtbare iconen.
  • Lever specs voor keyboard flows en lokale alternatieven voor gestures.

Developer

  • Implementeer focus management bij modals en single-page navigatie.
  • Gebruik aria-live voor dynamische foutmeldingen en updates.
  • Test met automatische tools + handmatige toetsenbord- en schermlezer checks.

Redactie/Content

  • Gebruik semantische headings en labels; controleer volgorde van content en focus.
  • Vermijd scripts die focus verplaatsen zonder zichtbare indicatie.
  • Zorg dat error messaging begrijpelijk en gekoppeld is aan invoervelden.

Alle teams: start met een scan op wcagtool.nl en download onze plugin om direct fouten in je workflow te krijgen.

Laatste praktische tip

Begin met de meest gebruikte user journeys (homepage → product → checkout). Voer een automatische scan met de WCAG checker/validator van wcagtool.nl, repareer de kritieke keyboard- en focusproblemen, en zet onze plugin in om regressies te voorkomen. Heb je vragen of wil je prioriteiten laten bepalen? Neem contact op via ons formulier — onze medewerkers reageren binnen 24 uur en helpen met concrete stappen per pagina.