WCAG 2.2: wat websites en webshops nú moeten aanpassen

WCAG 2.2 brengt concrete veranderingen die direct effect hebben op hoe designers, developers en redacties sites en webshops bouwen en beheren. Kleine aanpassingen aan focusstijlen, knoopgroottes en interacties kunnen grote toegankelijkheidswinst opleveren en juridische risico’s verkleinen.

Dit artikel behandelt wat er praktisch moet gebeuren, hoe je het test en welke code je meteen kunt inzetten. Gebruik onze WCAG checker / validator voor een snelle scan, download onze plugin voor continue checks en neem bij vragen contact op: ons team reageert altijd binnen 24 uur via het contactformulier.

Wat betekent dit?

WCAG 2.2 voegt en scherpt eisen aan die veel vaker in de praktijk misgaan: zichtbare en voldoende contrastieve focus, doelgroottes en -afstand voor touch targets, alternatieven voor drag-and-drop en toetsencombinaties, en betere opties bij toegangscontrole. Voor ontwerpers betekent dat concretere ontwerpen; voor devs betekent dat extra CSS/JS-controls en ARIA; voor redacties betekent dat content zo gestructureerd moet zijn dat toegankelijkheid niet alleen technisch maar ook redactioneel geborgd is.

Waarom dit belangrijk is

Praktisch: gebruikers met motorische beperkingen, cognitieve beperkingen en beperkte zichtbaarheid kunnen nu weleens afhaken als interactive elementen te klein, te dicht bij elkaar of niet via toetsen te bedienen zijn. Daarnaast nemen audits en wetgeving steeds meer verantwoordelijkheid voor digitale toegankelijkheid: goede implementatie scheelt kosten en reputatieschade.

Direct toepassen

1. Focus zichtbaar en leesbaar maken (essentieel)

Actie: geef alle interactieve elementen een duidelijke focusstijl met voldoende contrast en grootte. Test met keyboard-only navigatie.

/* voorbeeld CSS focusstijl */button:focus, a:focus, input:focus{outline:3px solid #005A9C;outline-offset:2px;border-radius:4px;box-shadow:0 0 0 4px rgba(0,90,156,0.12);}

Checklist focus

• Is de focus op alle interactieve elementen zichtbaar wanneer je tabt? (ja/nee)
• Heeft de focus minimaal 3px contrast ten opzichte van achtergrond en element?
• Blijft focus niet verborgen door custom components of overflow?

2. Doelgrootte en afstand (touch targets)

Actie: maak knoppen en links makkelijk raakbaar of bied alternatieven (zoals vergroten of extra whitespace).

/* minimale target grootte - voorbeeld */.cta-button{min-width:44px;min-height:44px;padding:10px 14px;touch-action:manipulation;}

Checklist doelgrootte

• Zijn alle touch targets groot genoeg of is er een alternatief? (bijv. extra ruimte of een duidelijke label)
• Zijn targets niet te dicht op elkaar (gebruik padding/margin)?

3. Vermijd drag-only interacties

Actie: bied alternatieven voor slepen (bijv. knoppen voor verplaatsen of toetsen). Documenteer keyboard- en ARIA-ondersteuning.

/* alternatief: verplaats-knoppen */←→

4. Toegankelijke authenticatie en toetsencombinaties

Actie: bied opties die geen complexe toetscombinaties of memorering vereisen. Als je toetsencombinaties gebruikt: maak ze uitschakelbaar of configureerbaar.

Hoe test je dat?

Snel toetsen (handmatige stappen)

• Keyboard-only: navigeer volledig met Tab/Shift+Tab, Enter en Space. Kun je alle functies bereiken en activeren?
• Screenreader: test met NVDA/VoiceOver/JAWS of belangrijkste flows werken (navigatie, formulieren, winkelwagen, checkout).
• Touch: test op mobiel met één vinger; controleer targetgrootte en afstand.
• Contrast: gebruik onze WCAG checker / validator of browser extensions om kleurcontrast te meten.

Concrete teststappen voor focus

1. Open pagina. Druk 10x op Tab en noteer of focus logisch vooruitgaat en zichtbaar blijft.
2. Herhaal op interactieve componenten in modals en custom widgets (selects, datepickers).
3. Gebruik devtools om focus-states te forceren en controleer of outline/box-shadow niet wordt weggefilterd.

Automatische en tooling checks

Gebruik onze WCAG checker / validator voor snelle scans en combineer met onze plugin voor WordPress voor continue monitoring. Gebruik daarnaast linters en CI-integraties die accessibility rules afdwingen.

Specifieke code-snippets en ARIA-tips

Skip link (directe winst voor keyboardgebruikers)

<a class="skip-link" href="#main">Direct naar content</a>

Aria/role voorbeeld voor dynamische widgets

<div role="dialog" aria-modal="true" aria-labelledby="dialog-title"><h2 id="dialog-title">Instellingen</h2></div>

Keyboard ondersteuning voorbeeld

// voorbeeld: Enter/Space activeren button met role=button document.addEventListener('keydown',e=>{if((e.key==='Enter'||e.key===' ')&&document.activeElement.getAttribute('role')==='button'){document.activeElement.click();e.preventDefault();}});

Wanneer is dit extra belangrijk?

Voor webshops gelden extra randvoorwaarden: check productfilters, winkelwagen, checkout-forms en betaalflows. Betaalpagina’s moeten altijd toetsen- en screenreader-vriendelijk zijn. Voor contentpagina’s geldt: lange artikelen hebben duidelijke kopstructuur, skip links en toegankelijke tabellen/figuren.

Prioriteiten voor webshops

• Checkout: volledige keyboard-flow en contrast in foutmeldingen
• Productkaart: duidelijke focus op “Toevoegen aan winkelwagen” en alternatieve toegangspunten
• Filters: vermijd drag-only sliders; gebruik checkboxes of voorspelbare controls

Tools en resources

Gebruik onze WCAG checker / validator voor een eerste audit, download onze plugin om checks in WordPress te automatiseren en plan een deep-dive met onze specialisten als je complexe widgets hebt. Ons team beantwoordt het contactformulier binnen 24 uur.

Laatste tip: begin met de kritische paden (navigatie, zoek, checkout, formulieren). Voer eerst quick wins uit (focusstijl, targetgrootte, skip links) en zet daarna automatisering en regressietests op met onze plugin en validator.

Wil je hulp? Run direct een scan met onze WCAG checker / validator, download onze plugin of neem contact op via het formulier — we reageren altijd binnen 24 uur.