WCAG 2.2: maak je website en webshop vandaag nog compliant

Geplaatst op door

WCAG 2.2: maak je website en webshop vandaag nog compliant

WCAG 2.2 brengt concrete, praktische eisen die jouw site toegankelijker maken voor mensen met zicht-, motorische en cognitieve beperkingen. Voor designers, developers en redacties betekent dit niet alleen een checklist: het is een set verbeteringen die de gebruikservaring van echte bezoekers direct verbetert en juridische risico’s verlaagt.

In dit artikel behandelen we wat WCAG 2.2 concreet toevoegt, waarom het voor jouw organisatie belangrijk is en — het allerbelangrijkste — hoe je het direct toepast en test. Gebruik onze WCAG checker/validator voor doorlopende controle, download onze plugin voor automatische scans en neem contact op met onze medewerkers via het contactformulier: we reageren binnen 24 uur.

Wat betekent dit?

WCAG 2.2 bouwt voort op 2.0/2.1 en introduceert extra succescriteria gericht op praktische bruikbaarheid: betere focusindicatoren, grotere en bereikbare interactieve doelen, minder gedwongen drag-bewegingen en aandacht voor mensen met motorische beperkingen en verminderde zichtbaarheid. Dit zijn toevoegingen, geen vervangingen — alle eerdere eisen blijven gelden.

Belangrijkste thema’s (kort)

  • Focus zichtbaar en contrastrijk (gebruikers moeten precies kunnen zien waar de focus is).
  • Minimale target-omvang voor touch/click doelen (zorg voor voldoende klikgebied).
  • Minder afhankelijkheid van drag-bewegingen en complexe gebaren.
  • Respecteer voorkeuren voor vermindering van bewegingen (prefers-reduced-motion).

Waarom dit belangrijk is

Toegankelijkheid verhoogt conversie, vermindert klantenservice vraag en vergroot je publiek. Voor ontwerpers: betere focus & target sizing leidt tot minder foutieve taps en snellere taken. Voor developers: het reduceert edge-cases en onderhoud doordat componenten robuuster worden. Voor redacties: heldere structuren en labels zorgen dat content vindbaar en begrijpelijk is.

Direct toepassen

Focus: duidelijke focusstijl

Voeg een consistente, contrastrijke focusindicator toe. Gebruik nooit alleen kleurverandering zonder rand of schaduw.

button:focus, a:focus{outline:3px solid #0a84ff;outline-offset:3px;border-radius:4px;box-shadow:none}

Target size: maak interactieve elementen groter

Stel een minimum klikgebied in met padding en min-dimensies. Werk altijd met inline-flex of block-elementen voor touch targets.

.btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 12px}

Verminder drag & complexe gebaren

Voorkom dat essentiële interacties alleen via drag of multi-touch werken. Bied alternatieven zoals knoppen of toetsencombinaties.

Reduce motion

Respecteer gebruikersinstellingen en geef een zachte fallback.

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

Formulieren: labels en toegankelijke foutmeldingen

Gebruik expliciete

<label for="email">E-mail</label><input id="email" name="email" type="email" aria-describedby="email-help email-error"><div id="email-error" role="alert">Voer een geldig e-mailadres in</div>

Hoe test je dat?

Snelle handmatige checks (essentieel)

  • Keyboard-only navigatie: navigeer helemaal met Tab, Shift+Tab, Enter en Escape. Zijn alle interactieve controls bereikbaar en logisch?
  • Focus check: is de focus zichtbaar en contrasteert deze met de achtergrond?
  • Touch/target check: controleer targets met een smartphone — zijn knoppen makkelijk te raken en zitten er geen krappe raakgebieden?
  • Reduce motion: zet prefers-reduced-motion aan in systeeminstellingen en test animaties/transities.
  • Screenreader-scan: lees pagina met NVDA (Windows) of VoiceOver (macOS/iOS) en controleer labels, rol- en foutmeldingen.

Automatische testen

Gebruik onze WCAG checker/validator voor een snelle eerste scan. Combineer met browser extensions (axe, Lighthouse) maar vertrouw niet alleen op automated tools — ze vangen slechts ~30–50% van problemen.

Concrete teststappen voor ontwikkelteams

  1. Run onze WCAG checker/validator op de belangrijkste templates (home, product, checkout, content-pagina).
  2. Voer keyboard-only walkthroughs voor primaire user flows (zoek, toevoegen aan winkelwagen, afrekenen).
  3. Test forms met NVDA/VoiceOver en met invalid input; controleer of error messages leesbaar en focusbaar zijn.
  4. Controleer touch targets op echte apparaten en emulators op verschillende schermgroottes.
  5. Verifieer contrast met onze checker of een contrast-tool; normale tekst ≥4.5:1, grote tekst ≥3:1.

Wanneer is dit extra belangrijk?

Sommige pagina’s vragen extra aandacht:

Checkout en betaling

  • Grote, duidelijke knoppen en focussturing bij fouten.
  • Geen drag-only acties bij het invoeren van betaalgegevens.

Zoek en filters

  • Keyboard bereikbaarheid van filters, resets en sorteeropties.
  • Snel toegankelijke ‘clear filters’ knop die dezelfde functionaliteit biedt als drag/slide gesture.

Interactie-intensieve tools (configurators, editors)

  • Zorg voor toetsenbord-alternatieven en duidelijke statusmeldingen voor wijzigingen.
  • Implementeer undo/redo en voorspelbare focusvolgorde.

Praktische checklist voor jouw sprint

Quick sprint checklist

  • Run WCAG checker/validator op pagina’s — noteer top 10 issues.
  • Voeg focus CSS toe en test op contrast en zichtbaarheid.
  • Vergroot touch targets met padding/min-dimensions.
  • Voeg aria-roles/labels toe waar native labels ontbreken.
  • Implementeer prefers-reduced-motion en test op echte apparaten.
  • Doe één screenreader-run per pagina type.

Snelle code-snippets

Toegankelijke button met duidelijke focus en aria-naam:

<button class="btn" aria-label="Toevoegen aan winkelwagen"><span>In winkelwagen</span></button>

Toegankelijke link die éénvoudig met keyboard werkt (vermijd onclick zonder keyboard handler):

<a href="/volgende" class="link">Volgende stap</a>

Tools en resources

Gebruik onze WCAG checker/validator voor bulkscans en gedetailleerde rapporten. Download onze plugin voor CI/CD-integratie en automatische rapportage bij elke deployment. Wil je hulp bij implementatie of een toegankelijkheids-audit? Vul het contactformulier op wcagtool.nl/contact in — onze medewerkers reageren binnen 24 uur.

Praktische tip: begin met je top-10 pagina’s en los eerst issues op die direct invloed hebben op conversie (checkout, account, zoekresultaten). Gebruik daarna onze plugin in je build pipeline om regressies te voorkomen. Voor dringende vragen: gebruik het contactformulier; wij nemen binnen 24 uur contact op.