WCAG 2.2: wat jouw website en webshop nú verplicht moet hebben

WCAG 2.2 verandert hoe bezoekers je site ervaren en wat je technisch en redactioneel moet regelen. Als designer, developer of redacteur is het essentieel om de nieuwe eisen meteen te vertalen naar concrete aanpassingen in UI, code en content—zeker voor formulieren, checkoutflows en interactieve componenten.

Dit artikel legt praktisch uit wat WCAG 2.2 toevoegt, waarom het belangrijk is, welke onderdelen je direct moet aanpakken en hoe je dat test. Geen vaagheden: checklists, code-snippets en teststappen die je nú kunt toepassen. Gebruik onze WCAG checker/validator of download onze plugin om snel te starten; neem contact op als je hulp wil—ons team reageert binnen 24 uur.

Wat betekent dit?

WCAG 2.2 bouwt voort op 2.1 en voegt success criteria die vooral toegankelijkheid voor toetsenbordgebruikers, mensen met motorische beperkingen en zichtproblemen verbeteren. Belangrijke thema’s: zichtbare focus, minimale targetgrootte voor touch, alternatieve interacties voor slepen en betere ondersteuning van dynamische content. Voor jou als maker betekent dat: controleren en aanpassen van focusstijlen, knoppen en links optimaliseren voor touch, formulieren helder labelen en ARIA correct gebruiken.

Waarom dit belangrijk is

Toegankelijkheid is geen extra feature maar een verplichting: gebruikers met beperkingen moeten alle functionaliteit kunnen gebruiken, consumenten verwachten een werkende webshop, en organisaties riskeren claims en imagoschade. Bovendien verbetert toegankelijkheid vaak de UX voor iedereen (sneller navigeren met toetsenbord, duidelijkere labels, minder fouten in formulieren).

Direct toepassen

Mini-checklist: snelle zaken die je direct moet doen

Controleer en verbeter focuszichtbaarheid (niet alleen outline: kleur, contrast, grootte).
Maak touch-doelen minimaal 24×24 CSS pixels of zorg voor alternatieven (zoals grotere knoppen).
Verwijder kritieke acties die alleen via slepen werken; bied alternatieven (knoppen).
Alle formuliervelden hebben expliciete <label> of toegankelijke naam via aria-label.
Afbeeldingen hebben betekenisvolle alt-teksten; decoratief = alt="".
Test alle interacties met alleen toetsenbord en met een schermlezer.

Voorbeeld: skip link en focusstijl

Skip-links en heldere focusstijlen verbeteren directe navigatie:

<a href="#main" class="skip">Direct naar inhoud


Voorbeeld: toegankelijke knop en ARIA
Gebruik echte knop-elementen en geef duidelijke namen:
<button type="button" class="cta">Aan winkelwagen toevoegen</button><br><!-- Als visuele tekst ontbreekt: --><br><button aria-label="Sluiten" class="close"><svg>…</svg></button>
Hoe test je dat?
Automatisch en handmatig combineren
Automatische tools (zoals onze WCAG checker/validator) vangen veel issues: ontbrekende labels, contrast, ARIA-problemen. Gebruik ze als eerste stap, maar vertrouw niet alleen op tools—ze missen context, dynamische problemen en toetsenbord-gedrag.
Concrete teststappen (handmatig)

Tab-test: navigeer vanaf bovenkant pagina enkel met Tab/Shift+Tab. Controleer zichtbare focus op alle interactieve elementen en logische volgorde.
Enter/Space: activeer knoppen en links met Enter en Space; werk controles zoals checkboxes met Space.
Screenreader-run: test met NVDA/VoiceOver om labels, headings en live updates (alerts) te verifiëren.
Touch-test: op mobiel of simulatie test je targetgrootte en alternatieven voor slepen.
Formulieren: controleer foutmeldingen zijn toegankelijk (role="alert" of aria-live) en dat fouten worden aangekondigd samen met focus naar het foutveld.

Testvoorbeeld: focus niet afgeknipt
Check of focus zichtbaar blijft als een element aan de rand van het scherm staat (Focus Not Obscured): zoom in of verplaats het element naar de rand en tab ernaartoe; focus mag niet buiten viewport vallen.
Wanneer is dit extra belangrijk?
Sommige pagina’s en componenten hebben prioriteit voor aanpassing:

Checkout- en betaalpagina’s: elk obstakel vermindert conversie en kan juridische gevolgen hebben.
Formulieren voor klantcontact of aanvragen: foutafhandeling en labels zijn essentieel.
Interne tools en dashboards: werknemers met beperkingen moeten full access hebben.
Mobiele-first experiences: touch-targets en alternatieven voor slepen zijn cruciaal.

Prioriteitslijst voor webshops

Betalingsflow: toetsenbordtoegankelijk, foutmeldingen en focusbeheer.
Productfilters en zoek: labels, selecteerbare opties en targetgrootte.
Mini-cart en modals: focustrap en uitsluiten van verborgen content.

Specifieke tips per rol
Voor designers

Ontwerp met duidelijke focusstates en minimaal 3:1 contrast tussen focusring en achtergrond.
Gebruik component library richtlijnen: aria-gedrag, keyboard-gedrag en visuele states documenteren.
Maak touch-vriendelijke layouts en vermijd alleen-swipe interacties voor cruciale functies.

Voor developers

Gebruik semantische HTML (button, nav, main, form). Vermijd clickable divs zonder role/tabindex.
Implementeer focus management: focus terugzetten naar zinvolle locatie bij modals sluiten en na foutmeldingen.
Gebruik ARIA wanneer native HTML niet volstaat; test met screenreaders.

Voor redacties

Schrijf heldere linkteksten (geen "klik hier").
Alt-teksten zijn beschrijvend en functie-gericht.
Structuur met duidelijke headings (H1–H3) en korte paragrafen.

Code snippets en patterns
Focus zichtbaar en toegankelijk (CSS)
.focus-visible{outline:3px solid #ffbf47;outline-offset:3px;border-radius:4px}button:focus,.skip:focus{box-shadow:0 0 0 3px rgba(255,191,71,0.2)}<br>/* Gebruik :focus-visible voor moderne browsers */
ARIA pattern: foutmelding bij formulier
<input id="email" name="email" aria-describedby="email-error" aria-invalid="true" /><br><div id="email-error" role="alert">Vul een geldig e-mailadres in</div>
Alternatief voor slepen
Vervang drag-only interacties door knoppen en toetsenbordopties:
<div class="reorder"><button class="move-up" aria-label="Verplaats naar boven">▲</button><button class="move-down" aria-label="Verplaats naar onder">▼</button></div>
Praktische test-checklist (kort)

Tab-navigatie: volledig en logisch.
Focus zichtbaar en niet buiten viewport.
Touch-targets minstens 24x24 CSS pixels of alternatieven.
Alle media heeft tekstalternatieven of ondertiteling.
Formulieren: labels, foutberichten, focus naar error en role="alert".
Dynamische updates: aria-live of role="status" waar nodig.

Start met onze gratis WCAG checker/validator op wcagtool.nl om snel een rapport te genereren. De scanner geeft concrete issues en verwijst naar relevante succescriteria. Voor snelle integratie kun je ook onze plugin downloaden—die geeft realtime feedback in de ontwikkelomgeving.
Als je vastloopt of een component wil laten beoordelen, vul het contactformulier in op wcagtool.nl/contact; onze medewerkers antwoorden binnen 24 uur en helpen met prioriteiten en implementatieadvies.
Laatste tip: maak toegankelijkheid onderdeel van je workflow—integreer de checker bij code-commits, review designs met de checklist en train redacteuren op toegankelijke teksten. Kleine wijzigingen (focus, labels, alt-teksten) leveren direct resultaat en voorkomen later dure refactors. Gebruik de WCAG checker/validator en onze plugin om snel de grootste issues uit je roadmap te halen.