WCAG 2.2: de must-have checklist voor toegankelijke webshops

Geplaatst op door

WCAG 2.2: de must-have checklist voor toegankelijke webshops

Toegankelijkheid is geen nice-to-have meer: het is businesskritisch. Voor webshops bepaalt goede WCAG-implementatie conversie, klanttevredenheid en juridische risico’s. WCAG 2.2 introduceert concrete eisen die vooral voor e-commerce cruciaal zijn: grotere targets, betere focus, toegankelijke authenticatie en touch-gedrag.

Dit artikel geeft designers, developers en redacties directe, praktische stappen om WCAG 2.2 te implementeren in webshops. Geen theoretische verhandelingen, maar checklist-items, code-snippets en teststappen die je vandaag nog kunt toepassen. Gebruik onze WCAG checker/validator, download de plugin en neem contact op — ons team reageert op contactformulieren binnen 24 uur.

Wat betekent dit?

WCAG 2.2 bouwt voort op 2.1 en voegt specifieke eisen die veel impact hebben op mobiele e-commerce en interactieve elementen. Belangrijke nieuwe succescriteria: Focus Visible (2.4.11), Dragging Movements (2.5.7), Target Size (2.5.8), Accessible Authentication (3.3.7) en verbeterde focus-gedragingen. Voor webshops gaat dit over: knoppen die je wél kunt aanraken, formulieren die perceptief en cognitief werken, en interfaces die keyboard- en screenreader-friendly zijn.

Waarom dit belangrijk is

Een ontoegankelijke checkout of productfilter verliest klanten en kan leiden tot klachten of boetes. Praktische voordelen van naleving:

  • Hogere conversie en bredere markttoegang.
  • Minder support-verzoeken en lagere retourpercentages door duidelijkere interfaces.
  • Lagere juridische risico’s en betere SEO (crawlbaarheid en structuur).

Direct toepassen

Mini-checklist voor productpagina’s

  • Titel en prijs als echte tekst (geen embedded in afbeelding).
  • Alt-teksten voor productafbeeldingen: functioneel en kort.
  • Knoppen: duidelijke labels, aria-labels waar nodig, juiste order van focus.
  • Varianten en opties: labels gekoppeld aan inputs (for / id) en foutmeldingen tekstueel beschikbaar.

HTML/ARIA snippets

Gebruik deze voorbeeldregels direct in je templates: <button aria-label="Voeg toe aan winkelwagen">Voeg toe</button> <label for="size">Maat</label><select id="size" name="size"><option value="">Kies maat</option></select> <img src="shirt.jpg" alt="Blauw t‑shirt, maat M">

CSS: focus en target size

Direct toepasbare CSS-snippets voor betere focus en touch-targets: button:focus-visible{outline:3px solid #005fcc;outline-offset:2px;border-radius:4px;} .touch-target{min-width:44px;min-height:44px;padding:8px 12px;display:inline-flex;align-items:center;justify-content:center;}

Formulieren: foutafhandeling en toegankelijke authenticatie

Toegankelijke login/checkout vereist duidelijke foutberichten en alternatieve authenticatieopties. Gebruik aria-invalid en aria-describedby:

<input id="email" name="email" aria-invalid="false" aria-describedby="email-help email-error"> <div id="email-error" role="alert">Voer een geldig e‑mailadres in.</div>

Hoe test je dat?

1. Handmatige keyboard-test

  1. Schakel muis uit en navigeer vanaf de pagina-header met Tab en Shift+Tab.
  2. Controleer: is elke interactie bereikbaar, zichtbaar gefocust en logisch in volgorde?
  3. Probeer alle stappen van productselectie tot betaling met alleen toetsen.

2. Screenreader-test

  1. Test met NVDA (Windows) en VoiceOver (macOS/iOS). Luister naar labels, error reading en knopteksten.
  2. Zorg dat modal dialogs focus-trap correct werken en dat aria-live regions fouten voorlezen.

3. Mobiel & touch

  1. Controleer targetgrootte op echte apparaten: is elk klikbare element minstens ~44×44 CSS-pixels? Gebruik devtools device emulation maar verifieer op fysieke toestellen.
  2. Test dragging/gesture-alternatieven: kunnen gebruikers slepen vermijden of is er een alternatief interactiemodel (knoppen) voor acties die slepen vereisen?

4. Automated checks + onze WCAG checker

Gebruik automatisering voor bulk-issues (contrast, ontbrekende alt-attributen, ARIA-problemen) maar vertrouw niet alleen op tools. Start met onze WCAG checker/validator voor uitgebreide rapporten en download onze plugin voor CI-integratie en ontwikkelomgeving. Onze tool geeft concrete fix-tips en prioriteert issues per pagina.

Wanneer is dit extra belangrijk?

1. Checkout en betaalflows

Elke barrière in checkout betekent directe omzetverlies. Controleer focus-order, toegankelijke labels voor betaalmethoden en alternatieven voor captcha’s (Accessible Authentication, 3.3.7).

2. Mobiele gebruikers

Mobiele shoppers zijn gevoelig voor targetgrootte, touch-accuraatheid en zichtbare focus. Prioriteer 2.5.8 Target Size en 2.4.11 Focus Visible voor mobiele UI.

3. Promoties en tijdelijke elementen

Pop-ups en banners kunnen keyboard traps veroorzaken. Zorg dat dynamische content aria-live gebruikt en dat pop-ups via ESC sluiten en weggenomen worden uit de focusvolgorde wanneer gesloten.

Concrete fixes per rol

Voor designers

  • Ontwerp knopformaten >44 CSS-pixels en duidelijke focus-states in het design system.
  • Maak states zichtbaar (focus, hover, active) en documenteer in componentbibliotheek.

Voor developers

  • Gebruik semantische HTML, vermijd overmatig ARIA wanneer native HTML volstaat.
  • Implementeer focus-managers voor modals en toets-navigatie voor custom widgets.
  • Automatiseer checks met onze plugin in CI en laat pull-requests falen bij regressies.

Voor redacties

  • Schrijf alt-teksten die functioneel en beknopt zijn (product, kleur, maat als relevant).
  • Vermijd essentiele info alleen in afbeeldingen of op hover; plaats tekstueel in content.

Snelle checklist (kort)

  • Alle interactieve items keyboard-toegankelijk? (Tab reachable, Enter/Space werkt)
  • Focus zichtbaar en consistent? (2.4.11)
  • Touch-targets minimaal 44×44 CSS-px? (2.5.8)
  • Geen drag-only interacties zonder alternatief? (2.5.7)
  • Authenticatie heeft toegankelijke alternatieven en foutmeldingen? (3.3.7)
  • Contrast, labels, alt-teksten en semantische HTML gecontroleerd?

Hoe onze tools en support helpen

Gebruik onze WCAG checker/validator voor snelle audits; de plugin integreert in je ontwikkelworkflow zodat issues vroegtijdig zichtbaar zijn. Wil je maatwerkadvies of hulp bij complexe componenten? Neem contact op via het formulier — ons team reageert binnen 24 uur.

Laatste tip: begin met de checkout en meest gebruikte mobile flows. Scan die pagina’s meteen met onze validator, voer keyboard- en screenreader-tests uit en patch high-impact issues eerst. Download de plugin, laat de CI-tests draaien en mail of bel ons bij vragen — wij ondersteunen je stap voor stap.