WCAG 2.2: wat webshops en websites nú moeten aanpassen

Geplaatst op door

WCAG 2.2: wat webshops en websites nú moeten aanpassen

WCAG 2.2 brengt concrete eisen die direct impact hebben op gebruiksgemak en wettelijke toegankelijkheid van webshops en websites. Wie nu aanpast voorkomt gemiste klanten, klachten en dure herontwerpen later.

Dit artikel richt zich op designers, developers en redacties: wat verandert er precies, welke onderdelen van je site zijn prioriteit en hoe voer je concrete aanpassingen snel en toetsbaar door. Gebruik onze WCAG checker / validator en download onze plugin om veel checks te automatiseren — of neem contact op, ons team beantwoordt het contactformulier altijd binnen 24 uur.

Wat betekent dit?

WCAG 2.2 voegt succescriteria toe die vooral zichtbaarheid van focus, minimale targetgrootte, alternatieven voor slepen en toegankelijke authenticatie aanscherpen. Praktisch: knoppen moeten makkelijker te raken, focus moet zichtbaar en niet weggemoffeld worden door sticky headers, drag‑interfaces moeten bedienbaar zijn zonder slepen en loginflows mogen niemand onnodig blokkeren.

Belangrijkste punten (kort)

  • Focus zichtbaar en hoog contrasterend
  • Focus niet opgeslokt door layout of sticky header
  • Interactie zonder slepen mogelijk (knoppen als alternatief)
  • Minimale targetgrootte voor touch
  • Toegankelijke authenticatie zonder onnodige cognitieve drempels

Waarom dit belangrijk is

Voor bezoekers met motorische beperkingen, lagere vision of cognitieve uitdagingen zijn deze wijzigingen het verschil tussen afrekenen of afhaken. Voor organisaties betekent het: betere conversie, minder support en minder juridische risico’s. Bovendien zijn veel aanpassingen relatief klein technisch, maar hebben ze grote impact op gebruiksvriendelijkheid.

Direct toepassen

Focus: CSS-implementatie

Voeg een duidelijke, contrasterende focusstijl toe met fallback voor browsers die :focus-visible ondersteunen. Voorbeeld:

:where(a, button, input, [tabindex]){outline:none}
:where(a, button, input, [tabindex]):focus-visible{outline:3px solid #0a84ff;outline-offset:3px;border-radius:4px}

Focus niet obscuren: scroll- en header-tips

Als je een sticky header hebt (bijv. 64px hoog), zorg dat het element niet onder de header verdwijnt wanneer het gefocust wordt. Twee opties:

/* CSS: reserveer ruimte bij scroll-into-view */:target, [tabindex="-1"]{scroll-margin-top:70px}
/* JS: focus met offset */element.tabIndex=-1;element.focus();element.scrollIntoView({block:'nearest'});

Targetgrootte: minimale touch-standaard

Zorg dat interactieve targets minimaal 24 CSS pixels breed en hoog zijn, tenzij targets dicht op elkaar staan of visueel duidelijk smaller moeten blijven. Praktische CSS:

.touch-target{min-width:24px;min-height:24px;padding:6px;box-sizing:content-box;display:inline-flex;align-items:center;justify-content:center}

Alternatieven voor slepen (drag)

Elke drag-only interactie moet een alternatief aanbieden: knoppen, checkboxes, of keyboard-gestuurde controls.

<div class="carousel"><button aria-label="Vorige"></button><div role="list" aria-live="polite">...</div><button aria-label="Volgende"></button></div>

Toegankelijke authenticatie

Vermijd captcha-zonder-alternatief en beperk geheugentestjes. Bied passwordless (magic links), optionele “onthoud dit apparaat”, en duidelijke foutmeldingen met remedie-adviezen.

<form aria-labelledby="login-title"><label for="email">E-mail</label><input id="email" name="email" type="email" autocomplete="username"><button type="submit">Stuur magic link</button></form>

Hoe test je dat?

Handmatige teststappen (developers & testers)

  1. Keyboard-only doorlopen: tab, shift+tab, enter, space. Is focus altijd zichtbaar en werkt alles?
  2. Focus onder sticky header: navigeer naar ankerlinks, form errors en dynamische content — wordt content niet verborgen?
  3. Touch target check: inspecteer met browser devtools, meet minimaal 24 CSSpx.
  4. Drag-alternatieven: schakel muis uit of gebruik touchscreen; werken de knop-alternatieven?
  5. Authentication: probeer login zonder CAPTCHA, foutscenario’s en herstel-opties.

Automatische checks

Gebruik eerst onze WCAG checker / validator voor een brede scan. Download onze plugin om checks in CI of in de browser uit te voeren — dat vangt veel regressies vroeg. Combineer met Lighthouse, axe en browser devtools, maar vertrouw niet uitsluitend op automatisering.

Screenreader & mobiel testen

Test met NVDA/VoiceOver en mobile VoiceOver/ TalkBack. Controleer focusvolgorde, labels en live region updates. Gebruik echte apparaten voor touch-target en scroll‑behaviour.

Wanneer is dit extra belangrijk?

Webshops: checkout, filters, carrousels

  • Checkout knoppen en wijzigaantal (plus/min) moeten groot en focussable zijn.
  • Filters met drag of slider: altijd toetsen of buttons bieden.
  • Product carousels: voeg prev/next en role=list met aria-live indien inhoud verandert.

Formulieren & redactie: foutmeldingen en focus

  • Zorg dat server-side validatie de focus naar het eerste foutveld verplaatst (tabindex=-1 + focus()) en dat foutmeldingen programmatically determinable zijn (aria-describedby).
  • CMS-template: voeg standaard focus-styles en form‑error handling toe zodat redacties geen losse fouten introduceren.

Apps & interactieve widgets

Alle drag‑and‑drop widgets moeten keyboard- en touchvriendelijke alternatieven hebben. Documenteer in component library hoe ontwikkelaars de ARIA-states moeten gebruiken en welke shortcuts beschikbaar zijn.

Checklists per rol

Designers — checklist

  • Maak focus states zichtbaar in design system (kleur, dikte, offset).
  • Definieer minimale targetgrootte in UI-kit (min 24px, prefer 40+ voor comfort).
  • Voorzie alternatieven voor gestures in componentenlibrary.

Developers — checklist

  • Implementeer :focus-visible fallback en test in alle browsers.
  • Voeg scroll-margin-top of focus-managers toe voor sticky headers.
  • Verifieer touch-targets en update CSS-componenten.
  • Implementeer ARIA attributen en toetsenbordbediening voor drag widgets.

Redacties — checklist

  • Gebruik correcte labels en beschrijvingen (aria-describedby) bij formulieren en foutmeldingen.
  • Vermijd afbeeldingen als enige drager van betekenis zonder alt-tekst.
  • Volg content-templates die reeds WCAG 2.2 regels afdwingen.

Praktische code-snippets & patterns

Focus-visible fallback (compact)

/* basis */:focus{outline:none}
:focus-visible{outline:3px solid #0a84ff;outline-offset:3px}

Sticky header fix

/* CSS */:target{scroll-margin-top:80px}
/* JS bij focus op dynamisch element */const el=document.getElementById('error');if(el){el.tabIndex=-1;el.focus();}

Drag alternatief pattern

<div class="draggable"><button class="move-up" aria-label="Verplaats omhoog">▲</button><button class="move-down" aria-label="Verplaats omlaag">▼</button></div>

Hoe onze tools helpen

Begin met onze WCAG checker / validator om snel zicht te krijgen op risicopunten. Download onze plugin voor browserintegratie en CI-automatisering; dat vangt regressies vroeg af. Lukt iets niet of wil je priorisatieadvies? Neem contact op — ons team reageert op het contactformulier altijd binnen 24 uur en helpt met concrete fixes of audits.

Praktische tip: plan 2–3 “quick wins” (focus styles, header scroll-margin, touch targets) als sprintdoelen en voer daarna component- en CMS-wide aanpassingen uit met onze plugin en validator in je CI.