WCAG 2.2: Onmisbare updates voor jouw website en webshop

Geplaatst op door

WCAG 2.2: Onmisbare updates voor jouw website en webshop

WCAG 2.2 brengt concrete, praktische eisen die direct invloed hebben op design, development en contentprocessen. Als je gebruikers met een beperking wil bedienen en juridische risico’s wil verminderen, moet je deze updates kennen en toepassen — niet morgen, maar vandaag.

In dit artikel behandelen we wat er verandert, waarom het ertoe doet en hoe je het direct toepast met voorbeelden, teststappen en checklists. Gebruik onze WCAG checker/validator en download onze plugin voor gerichte scans; neem anders contact op met onze medewerkers via het contactformulier — ze antwoorden altijd binnen 24 uur.

Wat betekent dit?

WCAG 2.2 voegt praktische succescriteria toe die vooral gaan over: duidelijke focusindicatoren, betere touch-targets, alternatieven voor slepen/dragging, toegankelijkere authenticatie- en invoerflows en robuustere keyboard-ondersteuning. Voor designers en developers betekent het: kleine aanpassingen in CSS/ARIA en in sommige gevallen extra JavaScript voor keyboard-ondersteuning en alternatieven.

Belangrijkste thema’s in één zin

  • Focus zichtbaar en goed contrasteerbaar
  • Touch- en klikdoelen groter of makkelijker te actueren
  • Alternatieven voor drag-and-drop en gestures
  • Toegankelijke inlog- en formulierervaringen

Waarom dit belangrijk is

Deze updates verminderen struikelblokken voor mensen met motorische, visuele en cognitieve beperkingen en verbeteren de bruikbaarheid voor iedereen (mobile first!). Bovendien worden steeds meer Europese en nationale regels strikter; voldoen aan WCAG 2.2 is dus zowel een UX- als een compliance-actie.

Concrete impact voor jouw team

  • Designers: focusstijlen en touch-gids opnemen in component library
  • Developers: componenten keyboard- en touch-proof maken, ARIA correct inzetten
  • Redacties: formulieren en authenticatieprocessen herzien en alternatieven aanbieden

Direct toepassen

Checklist: focus appearance (direct toepasbaar)

  • Iedere focusbare interactie heeft een zichtbare focusstate
  • Contrast tussen focusindicator en achtergrond is voldoende (zorg voor voldoende zichtbaarheid)
  • Custom controls behouden focusbaarheid (tabindex, role en keyboard handlers)

CSS-snippet: veilige focusstijl

button:focus, a:focus { outline: 3px solid #005fcc; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(0,95,204,0.15); }

Checklist: target size (touch/klik)

  • Belangrijke knoppen en touchtargets zijn groot genoeg of hebben voldoende padding
  • Als visueel klein, zorg voor extra padding of een vergroot click-area via pseudo-elementen
  • Controleren op mobile: centre-to-centre spacing voorkomt misacties

CSS-snippet: minimum touch-area

.btn { min-width: 44px; min-height: 44px; padding: 8px 12px; box-sizing: content-box; }

Keyboard-alternatief voor drag-and-drop

Voor drag-and-drop-items implementeer altijd een keyboard-alternatief: verplaats knoppen (verplaats omhoog/omlaag) of gebruik arrow-key handlers en aria-live updates.

<div role="list" aria-label="Sorteerbare lijst">
  <div role="listitem" tabindex="0" aria-grabbed="false">Item 1 <button aria-label="Verplaats omhoog">↑</button> <button aria-label="Verplaats omlaag">↓</button></div>
</div>

Show/Hide password: praktisch en toegankelijk

<label for="pwd">Wachtwoord</label>
<input id="pwd" type="password" aria-describedby="pwd-help">
<button type="button" aria-pressed="false" aria-controls="pwd" onclick="togglePwd(this)">Toon</button>

Zorg dat de knop een aria-pressed togglet en dat de actie geannuleerd kan worden via keyboard.

Hoe test je dat?

Automatisch + handmatig — aanbevolen workflow

  1. Draai een automatische scan met onze WCAG checker/validator (download de plugin voor CI-integratie).
  2. Los gevonden issues eerst op in component library; voer opnieuw een scan uit.
  3. Handmatige core-tests: keyboard-only (Tab, Shift+Tab, Enter, Space, Arrow-keys), screenreader-test (NVDA/VoiceOver), touch-test op mobiel en zoom-test (400%).

Stap-voor-stap test: focus en tab-volgorde

  1. Schakel alle muisbediening uit en navigeer alleen met Tab. Elke interactieve controle moet focus krijgen en focus moet zichtbaar zijn.
  2. Controleer logische volgorde: labels bij inputs, volgorde in DOM overeenkomend met visuele volgorde.

Stap-voor-stap test: target size & touch

  1. Open op mobiel en probeer interfacemomenten met je duim. Zijn knoppen makkelijk te raken?
  2. Gebruik browser devtools om de afmetingen te meten; pas CSS (min-width/min-height/padding) aan waar nodig.

Stap-voor-stap test: drag-and-drop en alternatieven

  1. Probeer drag actions met keyboard (indien aanwezig); controleer of er alternatieve knoppen zijn.
  2. Gebruik een screenreader en controleer aria-gestuurde updates of aria-live meldingen.

Gebruik onze WCAG checker/validator voor snelle prioritering; de plugin kan regressies detecteren bij deploys.

Wanneer is dit extra belangrijk?

Sommige situaties vereisen directe aandacht:

  • E-commerce checkout: grote knoppen, eenvoudige formulieren, toegankelijke betaalflows verminderen afhakers
  • Formulieren met meerdere stappen of authenticatie: bied passwordless opties en toegankelijke 2FA
  • Single Page Applications en custom widgets: focusbeheer, aria-roles en keyboard handlers kritisch

Praktijkvoorbeeld: webshop checkout

Maak knoppen (verder, betaal) groot, zorg dat error messages via aria-live worden gemeld en dat het formulier werkt onder 400% zoom. Scan met onze WCAG checker/validator en fix high-priority issues eerst.

Checklist voor high-risk pages

  • Checkout/betalingen: target sizes, focus, error handling
  • Account/inlog: show/hide wachtwoord, alternatieve 2FA, toegankelijk wachtwoordherstel
  • Complexe widgets: volledige keyboard-bediening en ARIA roles

Onze plugin helpt je snel te zien waar risico’s zitten; voor hulp kun je altijd contact opnemen — we reageren binnen 24 uur.

Extra tips en concrete code

Min-checklist bij deploy

  • Run WCAG checker/validator (automatisch)
  • Handmatige keyboard- en screenreader-tests op mobiele en desktop
  • Controleer target sizes en focusstyles in component library
  • Documenteer accessible patterns voor redacties en product owners

CSS-snippet: uitbreidbare touch-area zonder lay-out te breken

.touch-target { position: relative; }
.touch-target::before { content: ''; position: absolute; top: -8px; bottom: -8px; left: -8px; right: -8px; }

ARIA-tip voor dynamische updates

Gebruik aria-live regions voor statusmeldingen en errors: <div aria-live=”polite” class=”sr-only”></div>. Update deze region bij submit/validatie zodat screenreaders direct feedback geven.

Blijf scannen met onze WCAG checker/validator en integreer de plugin in je CI-pipeline voor regressiepreventie. Wil je sparren over prioritering of een audit? Download de plugin of stuur het contactformulier in; onze medewerkers geven binnen 24 uur praktisch advies en helpen je stappen te prioriteren.

Praktische laatste tip: begin bij je component library — als buttons, inputs en modals vanaf daar WCAG 2.2-proof zijn, volgt de rest veel makkelijker. Gebruik onze WCAG checker/validator, installeer de plugin en neem contact op als je hulp wil bij implementatie of training.