Is jouw website en webshop klaar voor WCAG 2.2?

Geplaatst op door

Is jouw website en webshop klaar voor WCAG 2.2?

WCAG 2.2 brengt concrete eisen die invloed hebben op ontwerp, frontend-code en redactionele workflows. Kleine aanpassingen aan focusstijlen, target-grootte en interactiepatronen betekenen het verschil tussen bruikbaarheid en onbruikbaarheid voor veel bezoekers.

Dit artikel helpt designers, developers en redacties praktisch aan de slag: welke wijzigingen vragen om aandacht, hoe je ze toepast met HTML/CSS/ARIA en hoe je snel kunt testen — met concrete checklists en codevoorbeelden. Gebruik daarnaast altijd onze WCAG checker/validator op wcagtool.nl, download onze plugin en neem bij vragen contact op; onze medewerkers reageren binnen 24 uur.

Wat betekent dit?

WCAG 2.2 introduceert extra succescriteria en scherpt bestaande interpretaties aan. Belangrijke thema’s zijn duidelijke focusindicatoren, voldoende aanraak-/klikgebieden (target size), en alternatieven voor acties die alleen via drag/veeg bewegingen werken. Voor redacties betekent het heldere content- en formulierregels: labels, foutmeldingen en consistentie.

Belangrijkste punten in simpele taal

  • Focus moet altijd goed zichtbaar en contrasteerbaar zijn.
  • Interactie-elementen moeten groot genoeg en makkelijk te raken zijn op touch.
  • Vervang of bied alternatieven voor drag/veeg-gestures.
  • Formulieren en authenticatie moeten begrijpelijk en zonder onnodige barrières zijn.

Waarom dit belangrijk is

Toegankelijkheid is geen luxe: het vergroot je publiek, verlaagt frictie in conversie- en klantprocessen en verkleint juridische risico’s voor overheden en grote organisaties. Voor e-commerce en kritische workflows (checkout, inloggen, formulieren) zie je direct effect op conversie als toegankelijkheid wordt verbeterd.

Zakelijke voordelen

  • Groter bereik: mensen met zicht-, motorische of cognitieve beperkingen bereiken je site.
  • Betere SEO en stabilere UX: duidelijke structuur en semantiek helpen zoekmachines en gebruikers.
  • Minder supportvragen en minder kans op boetes of claims.

Direct toepassen

Hier praktische aanpassingen per discipline: ontwerp, frontend en redactie. Implementeer stap voor stap en check elk punt met onze validator op wcagtool.nl of met onze plugin.

Design: focus en target size

Checklist voor ontwerpers:

  • Definieer een consistente focusstijl (kleur, dikte, offset).
  • Ontwerp knoppen en links met minstens 44×44 CSS pixels touch-target of zorg voor extra padding.
  • Vermijd acties die alleen via drag/veeg werken; voorzie alternatieve knoppen.

Voorbeeld CSS voor focus en target size:

a:focus, button:focus { outline: 3px solid #0A66C2; outline-offset: 2px; } .btn { min-width: 44px; min-height: 44px; padding: 10px 14px; }

Frontend: semantiek en ARIA

Checklist voor developers:

  • Gebruik semantische elementen (button, nav, main, form, label).
  • Voor custom controls: role, tabindex, aria-label/aria-labelledby en keyboard handlers voor Enter/Space.
  • Verifieer dat interactieve elementen niet alleen op click luisteren maar ook op keyboard events.

Voorbeeld HTML/ARIA voor een custom button:

Toevoegen

Redactie: copy, formuliervelden en foutmeldingen

Checklist voor redacties:

  • Alt-teksten voor afbeeldingen: beschrijvend en kort.
  • Formuliervelden: expliciete
  • Foutmeldingen moeten duidelijk, inline en gekoppeld met aria-describedby zijn.

Formuliervoorbeeld met koppeling van foutmelding:

Hoe test je dat?

Combineer geautomatiseerde tools met handmatige checks. Gebruik onze WCAG checker/validator op wcagtool.nl voor een eerste scan, installeer de plugin in je CMS voor continue checks en voer onderstaande handmatige stappen uit.

Handmatige teststappen

  1. Keyboard-only navigatie: navigeer met Tab/Shift+Tab, activeer met Enter/Space, controleer focusvolgorde en zichtbaarheid.
  2. Screenreader test: gebruik NVDA (Windows) of VoiceOver (Mac/iOS) en controleer leesvolgorde en labels.
  3. Touch-targets: test op mobiel of emulator of knoppen groot genoeg zijn en geen overlappende elementen hebben.
  4. Color contrast: controleer tekst en focusindicatoren met contrasttools (minimaal 4.5:1 body tekst, 3:1 grote tekst).
  5. Gesture-alternatieven: probeer functies zonder drag/veeg en controleer of knoppen alternatieven bieden.

Automatisch testen met onze tools

Start met de WCAG checker/validator op wcagtool.nl voor directe problemen, download onze plugin voor continue integratie in je CMS/build pipeline en exporteer rapporten voor stakeholders. Als de checker iets meldt wat onduidelijk is: vraag via het contactformulier — we reageren binnen 24 uur.

Wanneer is dit extra belangrijk?

Sommige pagina’s en processen vragen extra strikte naleving wegens impact op gebruikers of regelgeving:

  • Checkout-, betaal- of bestelpagina’s — conversieverlies bij ontoegankelijkheid.
  • Inloggen, wachtwoord-reset en accountbeheer — barrières leiden tot verlies van gebruikers.
  • Publieke dienstverlening en overheidsaanbod — vaak wettelijk verplicht.
  • Mobiele-first interfaces — target size en touch-gestures zijn hier cruciaal.

Schets van risicopagina’s en concrete checks

  • Accountpagina: test keyboard flows voor wachtwoordwijziging en 2FA; zorg dat alternatieven bestaan voor visuele CAPTCHA’s.
  • Productdetailpagina: alt-teksten, duidelijke call-to-action en toegankelijke carrousels (focusable, pauzable).
  • Zoekresultaten: sorteer- en filteropties bedienbaar via keyboard en met duidelijke labels.

Concrete checklist (druk-klaar)

  • Focus: altijd zichtbaar, contrasterend en niet alleen op kleur gebaseerd.
  • Target size: minimaal 44×44 CSS-pixels of visuele padding toevoegen.
  • Drag-gestures: altijd alternatief via knoppen of toetsen.
  • Formulieren: labels, beschrijvingen en inline foutmeldingen met aria-describedby.
  • Media: ondertitels en transcripties voor audio/video.
  • Semantiek: correcte heading-hiërarchie en landmark roles.
  • Contrast: tekst en focusindicatoren voldoen aan ratio-eisen.

Snelle code-snippets voor veelvoorkomende issues

/* Focus zichtbaar en contrastrijk */ :focus { outline: 3px solid #005fcc; outline-offset: 2px; } /* Minimaal target */ .touch-target { min-width:44px; min-height:44px; padding:8px; display:inline-block; } /* Keyboard-compatibele custom control */ .toggle[role="switch"] { cursor:pointer; } .toggle[role="switch"][tabindex="0"] { outline-offset:2px; }

Laatste praktische tip

Start klein: pas één pagina per sprint aan en meet effect. Scan eerst met onze WCAG checker/validator op wcagtool.nl, installeer de plugin voor continue checks en als iets onduidelijk is, vul het contactformulier in — onze medewerkers reageren altijd binnen 24 uur. Kleine structurele verbeteringen zoals een duidelijke focusstijl en correcte form labels leveren vaak al direct zichtbare winst op.