WCAG 2.2 voor webshops: wat je nú moet regelen

Geplaatst op door

WCAG 2.2 voor webshops: wat je nú moet regelen

Webshops hebben veel interactiepunten: zoekvelden, filters, productkaarten, winkelwagen, betaalpagina’s en bevestigingsschermen. Dat verhoogt de kans dat bezoekers met een beperking ergens vastlopen. WCAG 2.2 brengt extra aandachtspunten die direct impact hebben op conversie en juridische naleving — vooral rond focus, aanraakdoelen en toegankelijke inlog- en betaalflows.

Dit artikel richt zich op designers, developers en redacties die praktisch aan de slag willen: wat zijn de belangrijkste wijzigingen en hoe pas je ze meteen toe op productpagina’s, filters, checkout en accountbeheer. Gebruik onze WCAG checker / validator, download onze plugin en neem contact op met onze medewerkers als je vragen hebt — het contactformulier wordt binnen 24 uur beantwoord.

Wat betekent dit?

WCAG 2.2 bouwt voort op 2.1 en 2.0 en voegt succescriteria toe die vooral praktisch zijn voor moderne webshops. Belangrijke thema’s: focusindicatoren zichtbaar en niet weggeklipt door vaste headers, grotere aanraakgebieden voor knoppen, alternatieven voor drag-en-drop, en beter toegankelijke authenticatie (inloggen, wachtwoordreset, multi-factor).

In één zin: je webshop moet beter werken met toetsenbord, schermlezers en aanraakschermen zonder dat je visuele styling of UX daarvoor in de weg zit.

Waarom dit belangrijk is

  • Conversie: bezoekers die niet vastlopen tijdens het checkout-proces kopen sneller.
  • Wettelijke risico’s: toegankelijkheidswetgeving en claimrisico’s nemen toe.
  • Merkreputatie: toegankelijkheid is klantvriendelijkheid en bereik.

Direct toepassen

Focus en zichtbaarheid

Wat te doen: zorg dat de focusring goed zichtbaar is, voldoende contrast heeft en niet door sticky headers of overlays wordt afgesneden.

  • CSS-check: maak een consistente focusstijl en forceer deze bij :focus, :focus-visible.
  • Zorg dat vaste headers geen element met focus bedekken — gebruik scroll-padding-top of JavaScript om scroll-to-focus te corrigeren.

Concrete CSS (copy/paste): button:focus, a:focus { outline: 3px solid #005ea5; outline-offset: 3px; box-shadow: 0 0 0 3px rgba(0,94,165,0.15); } Gebruik daarnaast :focus-visible waar gewenst.

Focus niet verborgen door vaste headers

Gebruik CSS/JS om browser-scroll en focus te synchroniseren:

html { scroll-padding-top: 80px; } /* pas aan naar de header-hoogte */

Of bij dynamische focus na navigatie:

element.focus(); window.scrollBy(0,-80); Pas het getal aan dat overeenkomt met je header-hoogte.

Target size: knoppen en links groter maken

Mobiele gebruikers moeten gemakkelijk knoppen raken. Maak click targets minstens 44×44 CSS-pixels zichtbaar of vergroot de hit-area met padding.

.cta { padding: 12px 16px; min-width: 44px; min-height: 44px; }

Visueel klein houden maar hit-area vergroten? Gebruik extra padding of pseudo-elementen met pointer-events: none op visuele onderdelen en pointer-events: auto op het klikbare element.

Geen drag-and-drop-only interfaces

Als je drag-en-drop gebruikt (bijv. wishlist, sorteren), bied altijd een alternatief via knoppen of contextmenu’s. Voor elk drag-event moet er een equivalent keyboard- of touch-actie zijn.

Toegankelijke authenticatie en betaalflows

  • Bied alternatieven voor CAPTCHA’s of kies toegankelijke varianten.
  • Mogelijkheden voor wachtwoordherstel via e-mail/sms én alternatieve verificatie.
  • Geef duidelijke foutmeldingen met focus naar de fout en role=”alert” of aria-live.

Voorbeeld foutmelding (HTML): <div role="alert" aria-live="assertive" id="err-1">Voer een geldig e-mailadres in.</div><input aria-describedby="err-1" aria-invalid="true" />

Hoe test je dat?

Automatische tooling

  • Start met onze WCAG checker / validator voor een eerste scan van pagina’s (productpagina, checkout, account).
  • Download onze plugin om snel ontwikkel- en staging-omgevingen te scannen en foutmeldingen direct in de build te krijgen.

Handmatige teststappen (essentieel)

  1. Toetsenbord-only: navigeer volledig via Tab, Shift+Tab, Enter, Space, pijltjestoetsen; test filterselecties, add-to-cart en checkout zonder muis.
  2. Screenreader: test met NVDA/JAWS (Windows) en VoiceOver (macOS/iOS) en controleer labels, order van content en ARIA-teksten.
  3. Mobiele aanraking: test targetgrootte en swipe/drag alternatieven op een echt toestel.
  4. Responsieve check: test kleine schermen, variabele tekstgrootte en uitgeschakelde CSS (kunnen gebruikers nog steeds items toevoegen en betalen?).

Concrete testchecklist voor een productpagina

  • Is productafbeelding voorzien van beschrijvende alt-tekst of aria-hidden indien decoratief?
  • Hebben alle inputvelden expliciete <label> en aria-describedby voor help-teksten?
  • Werkt de “Voeg toe aan winkelwagen”-knop met Enter en Space en is de focus zichtbaar?
  • Wordt een foutmelding door screenreader aangekondigd (role=”alert”) en gaat focus naar het foutveld?
  • Is de checkout flow toegankelijk zonder drag-en-drop en zonder visuele-only aanwijzingen?

Specifieke code-snippets & tips

Label en foutmelding

<label for="qty">Aantal</label><input id="qty" name="qty" type="number" aria-describedby="qty-help qty-err" /><div id="qty-help">Maximaal 10.</div><div id="qty-err" role="alert" aria-live="assertive">Voer een getal tussen 1 en 10 in.</div>

Keyboard-accessible cart buttons

<button class="qty-decrease" aria-label="Verlaag aantal" title="Verlaag" role="button">-</button><button class="qty-increase" aria-label="Verhoog aantal" title="Verhoog">+</button>

Focus-visual CSS

*:focus { outline: 3px solid #ffb703; outline-offset: 3px; } /* alternatief: use :focus-visible voor niet-muis focus */

Grootte klikbare gebieden

.product-card a { display:inline-block; padding:10px; min-width:44px; min-height:44px; }

Wanneer is dit extra belangrijk?

  • Checkout en betaalpagina’s: elk obstakel kost directe omzet.
  • Accountbeheer en wachtwoordherstel: foutgevoelig en vaak gebruikt door mensen met geheugenproblemen of assistieve tech.
  • Filters en sortering: onzichtbare focus of drag-only widgets maken browse onmogelijk.
  • Mobile-first bezoekers: targetgrootte en gesture-alternatieven zijn cruciaal.

Praktische implementatie roadmap (kort)

  1. Voer een site-scan uit met onze WCAG checker / validator; noteer kritieke issues (checkout, login, product-add).
  2. Fix focusstyles en scroll-padding-top eerste; test met keyboard en screenreader.
  3. Vergroot hit-areas en voeg alternatieve bediening voor drag-and-drop toe.
  4. Verbeter foutafhandeling in forms met aria-describedby en role=”alert”.
  5. Herhaal scan en gebruik onze plugin voor CI-integratie zodat regressies worden voorkomen.

Extra tips voor redacties en contentteams

Alt-teksten en productbeschrijvingen

  • Alt-teksten moeten functioneel en beknopt zijn: noem model/variant bij productfoto’s, niet “afbeelding”.
  • Gebruik duidelijke koppen, bullets en korte paragrafen; vermijd alleen visuele instructies zoals “klik op het blauwe icoon”.

Call-to-action copy

Wees expliciet in CTA’s: “Bestel nu” is okay, maar “Bestel maat M” is beter als het context-specifiek is voor dat product. Voeg aria-labels toe voor dynamische knoppen (“Voeg 1 item toe aan winkelwagen, €12,99”).

Hoe wij kunnen helpen

Gebruik onze WCAG checker / validator om snel een eerste rapport te krijgen. Wil je integratie in je ontwikkelpipeline? Download onze plugin; die vindt accessibility issues vroeg in het buildproces. Nog vragen of wil je een scan op maat? Neem contact op met onze medewerkers via het contactformulier op wcagtool.nl — we beantwoorden elk bericht binnen 24 uur.

Laat die benodigde WCAG 2.2 aanpassingen niet op de backlog liggen: begin met focus- en checkout-issues, koppel automatisering aan je CI met onze plugin en plan korte sprints voor formulier- en target-size fixes.

Praktische tip: start vandaag met één kritieke pagina (bijv. checkout) en werk iteratief — gebruik onze checker / validator om vóór en ná elke sprint te meten en stuur ons een case via het contactformulier als je hulp wil bij prioritering; we reageren binnen 24 uur.