WCAG 2.2: korte checklist voor toegankelijke websites en webshops

WCAG 2.2 zet praktische eisen die helpen je site of webshop écht toegankelijk te maken voor mensen met uiteenlopende beperkingen. Als designer, developer of redacteur wil je snel weten wat er concreet moet veranderen: focusvisueel, toetsenbordbediening, doelgroottes en alternatieven voor veeg- en sleep-acties zijn voorbeelden van wat nu extra aandacht vraagt.

Dit artikel geeft een compacte, actiegerichte checklist met codevoorbeelden, teststappen en nazorgtips zodat je direct aan de slag kan. Gebruik onze WCAG checker / validator voor snelle scans, download onze plugin voor ingebouwde suggesties in je CMS en neem bij twijfel contact op met onze medewerkers — zij beantwoorden het contactformulier altijd binnen 24 uur.

Wat betekent dit?

WCAG 2.2 bouwt voort op eerdere WCAG-versies en legt extra nadruk op bruikbaarheid voor mensen met motorische beperkingen, beperkte zichtbaarheid en mensen die alleen een toetsenbord of spraakbesturing gebruiken. Verwacht aanscherpingen rond zichtbare focus, alternatieven voor drag/gesture interacties, voldoende doelformaten en consistente hulp/informatie in flows.

Kernpunten in één zin

Zorg voor duidelijke, zichtbare focusstijlen op alle interactieve elementen.
Maak alle functionaliteit bereikbaar zonder muis of gebaren (toetsenbord- en aanwijzeralternatieven).
Hanteer minimale doelgroottes of compenseer met ruimte en makkelijke activeerbaarheid.
Beperk onverwachte bewegingen en bied ‘reflow’ en zoomvriendelijkheid.

Waarom dit belangrijk is

Een betere focusindicator, toetsenbordalternatieven en grotere doelformaten verminderen faalkans en verhogen conversie: mensen haken minder snel af bij betaling, formulieren en navigatie. Voor publieke organisaties en veel bedrijven is dit bovendien wettelijk relevant en vermindert het risico op klachten of juridische procedures.

Business- en UX-argumenten

Lagere bounce en meer voltooide transacties doordat interacties voorspelbaar zijn.
Grotere doelgroepbereik (mensen met motorische beperkingen, ouderen, mensen met low-vision).
Verbeterde SEO en vindbaarheid doordat structuur en semantiek beter worden toegepast.

Direct toepassen

Hier concrete aanpassingen die direct iets opleveren. Test kleine componenten eerst en rol stapsgewijs uit.

1) Focus zichtbaar en krachtig

Voeg een duidelijke focusstijl toe die voldoet aan contrast en grootte. Voorbeeld CSS:

/* Visueel sterke focus: duidelijke rand en offset */a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:3px solid #005A9C;outline-offset:2px;border-radius:4px;}/* Alternatief voor complexe componenten */.[role="button"]:focus{box-shadow:0 0 0 3px rgba(0,90,156,0.25);}

Mini-checklist: Focus

Niet weghalen van default focus zonder alternatief.
Focus zichtbaar bij alle interactieve elementen (incl. custom controls).
Contrast tussen focusring en achtergrond minimaal 3:1 (zichtbaarheid).

2) Toetsenbordalternatieven voor drag & gestures

Maak slepen toegankelijk door toetsenbordbediening en ARIA-states. Simpel patroon: tabindex, aria-grabbed en verplaats met pijltjestoetsen of +/-. Voorbeeld HTML + JS (essentie):

<div class="draggable" tabindex="0" role="option" aria-grabbed="false">Item</div><script>const el=document.querySelector('.draggable');el.addEventListener('keydown',e=>{if(e.key===' '||e.key==='Enter'){const grabbed=el.getAttribute('aria-grabbed')==='true';el.setAttribute('aria-grabbed',!grabbed);e.preventDefault()}if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.key)){// verplaats logica hier e.preventDefault()}});</script>

Mini-checklist: Drag & keyboard

Zorg voor toetsen om ‘pakken’ en ‘loslaten’ te simuleren (Space/Enter).
Pijltjestoetsen of dedicated toetsen om positie te veranderen.
ARIA-states zoals aria-grabbed en live-updates voor screenreaders.

3) Doelgrootte en target spacing

Als je niet aan minimale targetgrootte kan voldoen (bv. in compacte mobiele UIs), vergroot de klikbare ruimte met padding of vergroot de hitbox via pseudo-elementen.

/* Ruimtelijke vergroting hit-area */.icon-button{position:relative;padding:8px;} .icon-button::before{content:'';position:absolute;inset:-6px;border-radius:6px;}/* Alternatief: duidelijke touch-area */button{min-width:44px;min-height:44px;padding:6px 8px;}

Mini-checklist: Targets

Voorkom dicht opeengepakte targets (voldoende spacing).
Maak hitbox groter met padding/pseudo-elementen als visueel ontwerp klein blijft.

4) Formulieren en foutafhandeling

Zorg dat labels en foutmeldingen gekoppeld zijn, en bied suggesties of correcties.

<label for="email">E-mail</label><input id="email" name="email" type="email" aria-invalid="true" aria-describedby="email-error"><div id="email-error">Voer een geldig e‑mailadres in. Tip: gebruik voorbeeld@mail.nl</div>

Mini-checklist: Formulieren

Altijd expliciete <label> of aria-label gebruiken.
aria-invalid en aria-describedby voor fouten en hulpteksten.
Bied inline suggesties en een link naar uitgebreide hulp waar nodig.

Hoe test je dat?

Testen combineert geautomatiseerde tools en handmatige checks. Gebruik onze WCAG checker / validator als eerste scan, installeer de plugin voor scans binnen je CMS en loop vervolgens handmatige scenario’s door.

Automatisch: startpunten

Laat onze WCAG checker / validator de site scannen op structurele issues en gemiste attributen.
Gebruik browserdevtools met accessibility-pane en Lighthouse als aanvullende check.
Installeer onze plugin voor CI-achtige checks bij contentpublicatie.

Handmatig: concrete teststappen

Tabtest: navigeer volledig met Tab/Shift+Tab. Zijn alle controls bereikbaar en is focus zichtbaar?
Toetsenbordfuncties: activeer alle interactieve elementen met Enter/Space; controleer drag-alternatief met toetsen.
Screenreader: gebruik NVDA/JAWS (Windows) of VoiceOver (macOS/iOS) en controleer of labels, rollen en live-updates duidelijk worden aangekondigd.
Contrast en zoom: controleer contrast van focusring en UI-elementen; zoom naar 200–400% en controleer reflow zonder horizontaal scrollen.
Touch & gestures: test op mobiele apparaten of er alternatieven zijn voor veeg/drag-acties.

Debugging tips

Gebruik browser accessibility tree om ontbrekende namen/roles te vinden.
Schakel custom focus-removals tijdelijk uit om te zien welke default gedrag werd verwijderd.
Log aria-state changes en focus-events tijdens interacties voor reproduceren van fouten.

Wanneer is dit extra belangrijk?

Sommige pagina’s en flows verdienen directe prioriteit: checkout- en betaalpagina’s, aanmeld- en identiteitsflows, dynamische dashboards, en complexe editors of configuratoren. Voor e-commerce geldt: toegankelijk = minder drop-off bij betaalstappen.

Prioriteiten per context

Checkout & forms: labels, foutmeldingen, focusvolgorde en toetsenbordvoltooiing.
Product- en filterpagina’s: tastbare targets, keyboard-filtering en consistente uitsluitingen.
Interne tools & dashboards: snelle keyboard-navigatie, goed contrast en compacte alternatieven voor muis-gestuurde widgets.

Tools & resources

Gebruik onze WCAG checker / validator voor een snelle, betrouwbare scan. Download onze plugin voor integratie met je CMS en bouwproces. Bij vragen of complexe casussen: neem contact op via ons contactformulier — onze medewerkers beantwoorden dat altijd binnen 24 uur.

Snelle checklist om te downloaden

Installeer onze plugin en voer een volledige scan uit.
Repareer alle focus- en toetsenbordissues eerst.
Implementeer targetgrootte-oplossingen waar nodig.
Voer schermlezer- en zoomtests uit op kritische pagina’s.

Praktische tip: koppel accessibility-tickets aan componenten in je design system zodat fixes één keer goed in de broncomponent gebeuren en automatisch alle implementaties verbeteren. Gebruik onze WCAG checker / validator bij iedere release en schakel onze support in als je wilt dat wij meeloopen — contactformulier invullen en je hoort binnen 24 uur van ons.