WCAG 2.2 live: breng je website en webshop vandaag nog op orde

Geplaatst op door

WCAG 2.2 live: breng je website en webshop vandaag nog op orde

WCAG 2.2 is gepubliceerd en verandert de norm voor digitale toegankelijkheid. Voor designers, developers en redacties betekent dit concrete aanpassingen: van focusstijlen en toetsenbordbediening tot duidelijke formulierfeedback en contrastregels. Als je nu begint voorkom je boetes, verlies van klanten en exclusie van grote doelgroepen.

Dit artikel geeft praktische, direct toepasbare stappen en checklists zodat je vandaag aan de slag kunt met compliance. Geen theorie alleen: codevoorbeelden, teststappen en korte checklists per onderwerp zodat je collega’s meteen kunnen implementeren en testen.

Wat betekent dit?

WCAG 2.2 bouwt voort op 2.1 met extra succescriteria gericht op interacties en gebruiksvriendelijkheid: verbeterde toetsenbordondersteuning (Focus Visibility, Dragging Movements), betere formuliervoorkeuren (Accessible Authentication) en aandacht voor kleine schermen en mobiele interacties. Voor veel sites betekent het kleine aanpassingen met grote impact.

Belangrijke nieuwe of aangescherpte punten

  • Focus zichtbaarheid (Focus Appearance): duidelijke focusstijl verplicht.
  • Targetgrootte en aanraking (Target Size, Target Spacing): knoppen op mobiele interfaces moeten aantoonbaar groot genoeg en ruimtelijk gescheiden zijn.
  • Toegankelijke authenticatie (Accessible Authentication): voorbeelden van alternatieven voor visuele en auditieve verificatie.
  • Preventing accidental activation: onbedoelde acties verminderen.

Waarom dit belangrijk is

Toegankelijkheid vergroot je doelgroep en verbetert SEO, conversie en onderhoudbaarheid. Voor gemeenten en organisaties zijn er wettelijke eisen; voor commerciële sites is het een concurrentievoordeel en risicovermindering. Daarnaast is het ethisch correct: iedereen moet toegang hebben tot jouw content en diensten.

Zakelijke voordelen

  • Betere SEO: gestructureerde content en alternatieve tekst helpen vindbaarheid.
  • Hogere conversie: duidelijke formulieren en betere toetsenbordnavigatie verminderen drop-off.
  • Risicobeperking: minder kans op claims en boetes.

Direct toepassen

Hier praktische implementatiestappen per discipline — direct inzetbaar in sprint of backlog.

Design: focus en touch

  • Voeg altijd zichtbare focusstijlen toe en test ze bij verschillende zoomniveaus.
  • Ontwerp knoppen minimaal 44×44 CSS-pixels of zorg voor voldoende target spacing.
  • Vermijd hover-only interacties; zorg voor een keyboard- of touch-alternatief.

Voorbeeld CSS focusstijl: button:focus, a:focus { outline: 3px solid #0070f3; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(0,112,243,0.15); }

Developers: HTML, ARIA en forms

  • Altijd semantische elementen gebruiken (<button>, <label>, <nav> etc.).
  • Hang geen click-events alleen aan non-interactieve elementen zonder role/keyboard handling.
  • Voeg duidelijke foutmeldingen en aria-attributes toe bij formulieren.

Formuliervoorbeeld met label en ARIA: <label for="email">E-mail</label><input id="email" name="email" type="email" aria-required="true" aria-describedby="emailHelp" /><div id="emailHelp" aria-live="polite">Gebruik een geldig e-mailadres.</div>

Redactie: content en structuur

  • Gebruik koppen semantisch (H1-H6) en korte zinnen.
  • Voeg alt-teksten toe met functionele beschrijving, niet alleen “afbeelding”.
  • Controleer leesvolgorde en link-teksten (geen “klik hier”).

Alt-voorbeeld: alt="Grafiek toont maandelijkse omzetstijging van 10% in 2024"

Hoe test je dat?

Combineer geautomatiseerde tests met handmatige checks. Geen enkele tool vangt alles; menselijke tests zijn essentieel voor keyboard, screenreader en cognitieve toegankelijkheid.

Automatische tools

  • Gebruik onze WCAG checker/validator: wcagtool.nl/checker voor snelle fouten en waarschuwingen.
  • Integreer linters en CI-checks (axe-core, pa11y) in je pipeline.

Handmatige stappen (korte checklist)

  1. Schakel alleen toetsenbord in: navigeer alle pagina’s met Tab/Shift+Tab, activeer items met Enter/Space.
  2. Controleer focuszichtbaarheid en focusvolgorde.
  3. Gebruik screenreader (NVDA, VoiceOver) en luister of de content logisch en volledig is.
  4. Test formulieren met onvolledige/onjuiste invoer en bekijk aria-live en foutmeldingen.
  5. Mobiele test: toets targetgrootte, spacing en touch-acties op echte apparaten.

Concrete teststappen voor developers

  • Stap 1: run axe-core tijdens development en fix de kritieke issues.
  • Stap 2: handmatige keyboard-run door QA en developer samen.
  • Stap 3: review alt-teksten en kopstructuur met redactie.
  • Stap 4: valideer veranderingen met onze WCAG checker: wcagtool.nl/checker.

Wanneer is dit extra belangrijk?

Sommige situaties vereisen prioriteit: publieke diensten, e-commerce checkouts, betaalprocessen, inlogs en formulieren met legaliteit (aanvragen/betalingen). Ook bij redesigns en migraties: plan toegankelijkheid vanaf dag één.

Prioriteitslijst

  • Checkout en payment flows — voorkom blokkades voor keyboardgebruikers.
  • Inlog- en authenticatieschermen — bied alternatieven voor CAPTCHAs en visuele verificatie.
  • Formulieren met foutgevoelige invoer — directe, duidelijke foutfeedback en focus naar het foutveld.

Accessible Authentication voorbeeld

Voor alternatieven: aria-describedby en progressieve enhancement. Voorbeeld: <input type="text" id="phone" name="phone" aria-describedby="phoneHelp" /><div id="phoneHelp">Je kunt ook kiezen voor een verificatiecode via sms of e-mail.</div>

Praktische checklists & quick fixes

Quick checklist voor sprint

  • Voeg focusstijlen toe en test met zoom 200%.
  • Controleer alle interactieve elementen op keyboard toegankelijkheid.
  • Label alle formulierelementen en voeg aria-live voor foutmeldingen toe.
  • Controleer contrast met onze checker: wcagtool.nl/checker.
  • Implementeer skip-links en semantische navigatie.

Code-snippets

Skip link: <a class="skip-link" href="#main">Sla navigatie over</a> CSS voor zichtbaarheid: .skip-link{position:absolute;left:-999px;} .skip-link:focus{position:static;left:auto;top:0;background:#fff;padding:8px;}

ARIA-live voor foutmeldingen: <div id="formErrors" aria-live="assertive"></div>

Regressietest checklist

  • Voer automatisering uit op belangrijkste flows (checkout, zoekfunctie, contactformulier).
  • Controleer nieuwe componenten altijd op keyboard, focus en screenreader gedrag.
  • Plan toegankelijkheidsreview bij elke release.

Gebruik onze plugin om snel pagina’s te scannen in de browser: Download de WCAG plugin en integreer in je QA workflow.

Support en resources

Wil je hulp? Onze WCAG checker/validator op wcagtool.nl/checker geeft directe aanwijzingen per criterium. Download onze plugin voor snelle lokale scans: wcagtool.nl/plugin. Voor projectadvies of audits kun je contact opnemen met onze medewerkers; we beantwoorden elk contactformulier binnen 24 uur.

Laat je toegankelijkheidswerk niet aan het einde van de roadmap liggen: voeg kleine, meetbare taken toe per sprint en gebruik onze tools voor continue feedback.

Praktische tip: start met één cruciale gebruikersstroom (bijv. checkout) en maak die 100% WCAG 2.2-conform voordat je uitbreidt; test telkens met onze checker en de plugin en neem bij vragen contact op via wcagtool.nl/contact — reactie binnen 24 uur.