WCAG 2.2: zo maak je je webshop nú wél toegankelijk

Een toegankelijke webshop betekent meer klanten, minder supportverzoeken en juridisch minder risico. WCAG 2.2 is de nieuwste standaard die explicieter wordt over focus, touchdoelen, toegankelijke besturing en tijdslimieten — precies de onderdelen die webshops met dynamische content en complexe checkouts vaak laten liggen.

Dit artikel helpt designers, developers en redacties praktisch aan de slag: welke regels zijn nieuw of aangescherpt, welke concrete aanpassingen voer je vandaag nog door en hoe test je of je webshop echt werkt voor mensen met een beperking. Gebruik onze WCAG checker/validator op wcagtool.nl, download onze plugin en neem bij vragen contact op: ons team reageert binnen 24 uur op je contactformulier.

Wat betekent dit?

WCAG 2.2 bouwt voort op 2.0/2.1 en scherpt eisen aan die vaak problemen geven in webshops: focuszichtbaarheid, aanraakdoelgrootte, alternatieven voor muis-gebonden interacties en duidelijke foutafhandeling bij formulieren en betalingen. Praktisch: je moet zorgen dat knoppen en links goed zichtbaar gefocust kunnen worden, dat knoppen groot genoeg zijn op touchscreens, dat updates via AJAX aankondigingen krijgen en dat formulieren duidelijke, toegankelijke foutmeldingen hebben.

Mini-checklist: kort overzicht

Focus zichtbaar en goed contrasteerbaar
Touch-targets minimaal 44×44 CSS pixels of alternatieve oplossingen
Toegankelijke labels en foutmeldingen bij formulieren
Toegankelijke, niet-verstorende meldingen (aria-live)
Geen essentiële informatie alleen via kleur of muis

Waarom dit belangrijk is

Toegankelijkheid vergroot bereik en conversie: beter vindbare content, minder afhakers bij de checkout en lagere compensatie/claims. Het is ook beter voor SEO: gestructureerde content, correcte heading-hiërarchie en alt-teksten helpen zoekmachines. Daarnaast verwachten klanten en partners steeds vaker bewijs van accessibility: rapporten, testing en een deelbare checklist.

SEO & business argumenten

Grotere doelgroep = meer omzet
Minder klantenservicevragen bij onduidelijke formulieren
Lagere juridische risico’s en beeldvorming
Verbeterde indexering door semantische HTML

Direct toepassen

Hier concrete aanpassingen die je vandaag kunt doorvoeren in je webshop. Voor elk item korte code-snippets en teststappen.

Skip link: snelle winst

Voeg een skip link bovenaan je pagina toe zodat keyboardgebruikers snel naar content kunnen springen.

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

/* CSS */ .skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden} .skip-link:focus{position:static;left:0;width:auto;height:auto;padding:8px;background:#000;color:#fff;z-index:1000}

Focus zichtbaar maken (en contrastrijk)

Zorg dat focus niet alleen door een zwak outline zichtbaar is. Gebruik :focus-visible en een contrastrijke rand of schaduw.

button:focus-visible, a:focus-visible{outline:3px solid #ffbf47;outline-offset:3px;box-shadow:0 0 0 3px rgba(255,191,71,0.12)}

Touch targets: knoppen groter maken

Voor touchapparaten: minimaal 44×44 CSS pixels of transformeer layout zodat touch-targets niet dicht op elkaar zitten.

.btn{min-width:44px;min-height:44px;padding:12px 16px;border-radius:4px}

Formulieren: labels en foutmelding koppelen

Elke input moet een label hebben en foutmeldingen moeten technisch gekoppeld zijn (aria-describedby) en visueel duidelijk.

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

ARIA voor dynamische updates

Gebruik aria-live voor updates zoals winkelwagen-aantallen of foutmeldingen die via JavaScript verschijnen.

<div aria-live="polite" id="cart-status">1 artikel toegevoegd</div>

Hoe test je dat?

Automatische tools vinden veel problemen, maar handmatige testen zijn onmisbaar. Gebruik een combinatie: onze WCAG checker/validator voor snelle scans, de plugin voor ontwikkelende teams en handmatige checks met toetsenbord en screenreader.

Concrete teststappen (developer)

Automatische scan met onze WCAG checker/validator (wcagtool.nl)
Keyboard-only test: tab, shift+tab, Enter, Space, pijltjestoetsen door alle interacties; probeer checkout zonder muis
Screenreader test: NVDA (Windows) en VoiceOver (macOS/iOS). Controleer landingspagina, productpagina en checkout
Contrastchecks: gebruik kleurcontrasttools en controleer focus-contrast
Touch test op mobiel: bedien knoppen met duim, controleer doelgrootte en nabijheid

Checklist voor redacties

Alt-tekst op alle productafbeeldingen: kort en functioneel
Headings hiërarchie: H1 per pagina, H2 secties, geen H3 als H2 ontbreekt
Linkteksten duidelijk: geen “klik hier”
Video’s ondertiteling en transcript

Automatische en CI-integratie

Integreer accessibility checks in je build: axe-core of pa11y in CI. Gebruik onze plugin in combinatie met pre-commit hooks en laten falen op hoge-impact fouten.

Wanneer is dit extra belangrijk?

Sommige plekken in je webshop vereisen extra aandacht omdat fouten daar direct conversie en veiligheid raken.

Checkout en betaalpagina

Zorg dat betalingsfouten duidelijk en technisch gekoppeld zijn
Geen essentiële info alleen met kleurcodering
Alternatieven voor CAPTCHA

Productconfigurators en filters

Maak filters keyboard-bedienbaar en focusbaar
Gebruik aria-live voor filterresultaten
Zorg dat visuele wijzigingen ook voor screenreaders gemeld worden

Promo-banners en modal dialogs

Modals moeten focus-trap implementeren en sluiten met Esc
Gebruik role=”dialog” en aria-modal=”true” en zet focus naar de eerste focusbare knop
Annuleer automatische carrousels of maak pauzeer/stop beschikbaar

Praktische code-snippets en patterns

Focus trap voor modal (basis-idee)

// Concept: bij open modal set focus naar eerste focusable, bij Tab op laatste terug naar eerste

Accessible icon button

<button aria-label="Winkelwagen openen" class="icon-btn"><svg>...</svg></button>

Error handling pattern

// Form validation: zet focus op eerste fout en gebruik aria-describedby voor alle velden

Tools en resources

Gebruik onze WCAG checker/validator op wcagtool.nl als eerste stap. Download onze plugin voor real-time checks tijdens ontwikkeling en automatisering in CI. Voor diepgaand advies kun je contact opnemen met onze specialisten — het contactformulier wordt binnen 24 uur beantwoord.

Laat accessibility onderdeel zijn van design- en developmentworkflows: add accessibility-tasks aan tickets, review front-end PRs op a11y en train redacties met de checklist uit dit artikel. Gebruik onze checker/validator, installeer de plugin en neem contact op bij twijfel — we helpen praktisch en snel.

Laat als laatste praktische tip: begin bij de belangrijkste conversiepaden (homepage → product → checkout) en verbeter stap voor stap; scan elke release met de WCAG checker/validator en test minimaal één flow handmatig met toetsenbord en screenreader. Download onze plugin en gebruik het contactformulier op wcagtool.nl als je hulp wilt — we reageren binnen 24 uur.