WCAG 2.2: de last-minute checklist voor websites en webshops

WCAG 2.2 brengt concrete eisen en verduidelijkingen die direct impact hebben op ontwerp, development en redactie. Als je vandaag nog wilt zorgen dat je website of webshop voldoet aan moderne toegankelijkheidsverwachtingen, is dit je praktische handleiding: geen vage theorie, maar hands-on checklists, code-snippets en teststappen.

Dit artikel richt zich op designers, developers en redacties die praktisch aan de slag willen: snelle controles, concrete aanpassingen en hoe je problemen repareert zonder langdurige herbouw. Gebruik onze WCAG checker en download de plugin voor directe scans in je ontwikkelomgeving; bij vragen kun je het contactformulier invullen — onze medewerkers reageren altijd binnen 24 uur.

Wat betekent dit?

WCAG 2.2 is een aanvulling op eerdere versies en verduidelijkt best practices rond focus, touch-targets, drag-interacties en bewegingen die door interactie ontstaan. Voor teams betekent dit: toetsen op keyboard- en touchvriendelijkheid, duidelijke focusindicatoren die niet verdwijnen, alternatieven voor drag-only interfaces en respect voor gebruikersvoorkeuren voor beweging.

Belangrijke onderwerpen in één zin

• Focus: zichtbare indicatoren moeten altijd zichtbaar en niet afgedekt zijn.
• Touch/target: interactieve elementen moeten goed te raken zijn en consistent worden aangeboden.
• Drag: bied alternatieven voor verplaatsen via slepen.
• Beweging: maak interactieve animaties respectvol en respecteer prefers-reduced-motion.

Waarom dit belangrijk is

Toegankelijkheid is geen niche-onderdeel van kwaliteit; het is customer experience en juridisch risicobeheer. Slechte focus, kleine knoppen of drag-only features blokkeren grote groepen gebruikers — denk aan ouderen, mensen met motorische beperkingen en toetsenbordgebruikers. Bovendien verbetert toegankelijkheid vaak SEO en conversie (minder afhakers bij check-out, duidelijkere forms).

Direct toepassen

Focus: altijd zichtbaar en niet afgedekt

Wat te doen: voeg consistente, contrastrijke focusstijlen toe en zorg dat componenten bij focus niet verdwijnen onder sticky headers.

:focus-visible{outline:3px solid #ffbf47;outline-offset:2px;box-shadow:0 0 0 3px rgba(255,191,71,0.15);}html:focus-within{scroll-behavior:smooth;} /* zorg dat focus-navigatie vloeiend is */

Voorkom dat focus verdwijnt achter een vaste header:

:target,:focus{scroll-margin-top:80px;} /* pas 80px aan naar de hoogte van je header */

Touch-targets en interactieve grootte

Wat te doen: vergroot click/tap-gebieden door padding, niet alleen door visuele afmetingen te veranderen. Zorg dat interactieve elementen in combinatie met nabijliggende elementen blijven voldoen.

.btn{display:inline-block;padding:12px 16px;min-height:44px;min-width:44px;} /* vergroot het klikgebied via padding */

Tip: gebruik hit-area uitbreiding via pseudo-elementen als je visueel ontwerp niet groter mag zijn:

.icon-button{position:relative;} .icon-button::before{content:'';position:absolute;inset:-8px;border-radius:6px;} /* vergroot target, zonder layout te breken */

Drag-only interacties: altijd een alternatief

Als gebruikers slepen om iets te plaatsen of te ordenen, bied altijd toetsenbord- en knopalternatieven (bijv. pijltjes, “verplaats naar boven/beneden”, of drag-handle + buttons).

 
Item ▲▼

Beweging en animaties

Respecteer reduce-motion voorkeuren. Beweeg alleen als het functioneel of contextueel nodig is en bied opties om animaties uit te schakelen.

@media (prefers-reduced-motion:reduce){*{animation-duration:0.001ms!important;transition-duration:0.001ms!important;scroll-behavior:auto!important;}}

Hoe test je dat?

Automatische en handmatige combinatie

Start met onze WCAG checker / validator voor een snelle scan. Gebruik ook browser-devtools, toetsenbord-only tests en screenreader- checks.

Concrete teststappen — uitvoerbaar per component

1. Keyboard-navigatie: tab door alle interactieve elementen; controleer visuele focus en logische volgorde.
2. Focus niet-verdwenen: activeer een link diep op de pagina en gebruik ‘skip to content’ of anchor links; controleer of focus niet onder een sticky header verdwijnt.
3. Touch-targets: test op mobiel met vinger; gebruik devtools device toolbar en meet met overlays of onze plugin.
4. Drag-alternatief: is er een knop- of toetsenbordvariant? Test met alleen toetsenbord en met assistive tech.
5. Reduce motion: zet OS-instelling op ‘verminder beweging’ en test of animaties stoppen.

Checklist per release

• Pre-release: run de WCAG checker, fix high-priority focus & target issues.
• QA: keyboard-only en mobile-first test runs, check ARIA attributes en labels.
• Productie: activeer monitoring met onze plugin; maak toegankelijkheidsissues traceerbaar in je sprintboard.

Wanneer is dit extra belangrijk?

Maak prioriteit bij:

• Checkout- en betaalflows (conversieverlies door slechte toegankelijkheid).
• Interne portals en overheidsinformatie (wet- en regelgeving).
• Complexe widgets: datavisualisaties, drag-drop lijsten, rijke single-page apps.
• Mobiel-eerste webshops: touch-vriendelijkheid en grote targets zijn cruciaal.

Voor redacties

Let op kopstructuren, linktekst en consistente formulieren. Gebruik duidelijke calls-to-action en valideer elke publicatie met onze checker voordat je live gaat.

Voor designers

Integreer focus-, target- en reduced-motion-varianten in je component library. Maak duidelijke tokens voor focuskleur en -dikte en definieer standaard touch-padding.

Voor developers

Implementeer de CSS-snippets hierboven in je base stylesheet, bouw toetsenbordalternatieven en test met assistive tech in je CI-pijplijn met onze plugin.

Praktische code-snippets en ARIA-tips

Simple accessible button

<button class="icon-button" aria-pressed="false"><span class="visually-hidden">Favoriet zetten</span>★</button>

Visueel verborgen tekst (screenreader-only)

.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

ARIA-advies

Gebruik ARIA alleen als native HTML niet volstaat. Alt-teksten, form labels en semantic elements (<button>, <nav>, <main>) eerst; ARIA roles en properties aanvullend.

Handige mini-checklist voor live-scan

• Run onze WCAG checker op de pagina.
• Tab door: alle interacties bereikbaar?
• Focus zichtbaar en niet bedekt?
• Touch-targets praktisch testbaar met vinger?
• Drag-functionaliteit heeft alternatieven?
• Reduce-motion gerespecteerd?
• Formulieren: labels, foutmeldingen en focus bij fouten op orde?

Wil je direct actie? Download onze plugin en voer een scan uit in je staging-omgeving. Voor complexe componenten kun je het contactformulier invullen; onze specialisten reageren binnen 24 uur en geven concrete oplossingsrichtingen.

Praktische tip: voeg toegankelijkheidstaken als ‘definition of done’ toe aan je user stories: kleine fixes (focus, padding, aria-tekst) kunnen vaak binnen een sprint worden opgelost en voorkomen dure herbouw later. Gebruik de WCAG checker, download de plugin en neem contact op voor specifieke audits — we helpen je stap voor stap.