WCAG 2.2: Zijn jouw website en webshop vandaag al toegankelijk?

Geplaatst op door

WCAG 2.2: Zijn jouw website en webshop vandaag al toegankelijk?

WCAG 2.2: Zijn jouw website en webshop vandaag al toegankelijk?

Toegankelijkheid is geen luxe maar een pijler van goede digitale producten. Met WCAG 2.2 zijn er extra eisen gekomen die direct impact hebben op ontwerp, development en redactionele workflows. Als designer, developer of redacteur wil je weten wat er praktisch verandert en hoe je dat vandaag nog toepast.

In dit artikel leggen we concreet uit wat WCAG 2.2 betekent, waarom het belangrijk is voor jouw website of webshop, en welke snelle stappen je meteen kunt zetten. Geen fluff, wel voorbeelden, checks en kant-en-klare code-snippets die je direct kunt gebruiken. Gebruik onze WCAG checker/validator, download onze plugin of neem contact op — onze medewerkers beantwoorden het contactformulier altijd binnen 24 uur.

Wat betekent dit?

WCAG 2.2 bouwt voort op WCAG 2.1 en voegt succescriteria toe die veel voorkomende toegankelijkheidsproblemen verder reduceren: betere zichtbaarheid van focus, minimum touch-target-grootte, en regels rond onverwachte wijzigingen door invoer. Voor jou als maker betekent dat concrete aanpassingen in CSS, HTML/ARIA en interactiepatronen.

Belangrijkste veranderingen (kort)

  • Focusindicatoren moeten duidelijk en consistent zijn — niet alleen zichtbaar, maar goed contrasteerbaar.
  • Touch-targets krijgen minimumformaten — dit raakt knoppen en iconen in mobiele UI’s.
  • Inhoud die verandert door invoer moet gebruikers informeren en niet plotseling weglopen.

Waarom dit belangrijk is

WCAG is niet alleen wetgeving of checklistwerk: betere toegankelijkheid verhoogt conversie, vermindert supportverzoeken en voorkomt juridische risico’s. Voor webshops betekent dit minder afhakers bij checkout; voor contentteams betekent het dat artikelen en formulieren toegankelijk worden voor meer bezoekers.

Business impact — concreet

  • Minder verlaten winkelwagentjes door toegankelijke checkout flows.
  • Grotere doelgroep: ouderen en mensen met beperkingen bereiken waar je nu mogelijk bezoekers mist.
  • Verbeterde SEO — zoekmachines waarderen goede semantiek en gebruiksvriendelijkheid.

Direct toepassen

Hier vind je direct toepasbare tips per discipline: ontwerp, development en redactie.

Voor designers — checklist & componentregels

  • Zorg voor een focus-staat in het design system: altijd aanwezig en zichtbaar (contrast & dikte).
  • Ontwerp touch-targets minimaal 44×44 CSS-pixels of bied voldoende padding.
  • Documenteer tekstalternatieven en labels in contentguidelines (voor iconen, knoppen, afbeeldingen).

Voor developers — concrete code-snippets

Focus zichtbaar maken (CSS):

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

Zeker stellen van touch-targets:

.btn{min-width:44px;min-height:44px;padding:8px 12px;display:inline-flex;align-items:center;justify-content:center}

Toegankelijk icon-button met aria-label:

<button class="icon-btn" aria-label="Sluit" title="Sluit"><svg>…</svg></button>

Voor redacties — praktische checklist

  • Elke afbeelding heeft een relevant alt-attribuut; decoratieve afbeeldingen: alt=””.
  • Kopstructuur: gebruik juiste H-tags in volgorde en vaktermen alleen als uitlegbaar.
  • Vermijd content die automatisch start zonder controle; gebruik controls en waarschuwingen.

Hoe test je dat?

Testen is essentieel: combineer geautomatiseerde tools met handmatige checks en gebruikersfeedback. Gebruik onze WCAG checker/validator voor een eerste scan, download onze plugin voor integratie in je CI/CD en voer handmatige stappen uit hieronder.

Snelle teststappen (handmatig)

  1. Keyboard-only: navigeer met Tab, Shift+Tab, Enter, Space, pijltjestoetsen; alle interactieve elementen moeten bereikbaar en bruikbaar zijn.
  2. Focuscontrole: zorg dat focus niet onzichtbaar is en niet vastloopt; test met en zonder muis.
  3. Schermlezers: test hoofdpagina’s met NVDA (Windows) of VoiceOver (macOS/iOS) — controleren of ARIA-labels en headings logisch zijn.
  4. Touch-targets: test op mobiel, controleer of knoppen makkelijk tappable zijn.
  5. Veranderingen door invoer: vul formulieren en let op onverwachte inhoudsverschuivingen of verlies van focus.

Automated & CI checks

Gebruik onze WCAG checker/validator voor snelle rapporten en integreer onze plugin in je buildpipeline om regressies te voorkomen. Voeg ook tools toe zoals axe-core, pa11y of Lighthouse voor aanvullende coverage.

Wanneer is dit extra belangrijk?

Sommige pagina’s vereisen extra aandacht vanwege complexiteit of impact:

Prioriteitspagina’s

  • Checkout- en betaalpagina’s (webshops)
  • Inlog- en registratieformulieren
  • Contentpagina’s met hoge verkeersvolume of publieke informatie

Complexe componenten

  • Datatabellen en interactieve grafieken: zorg voor alternatieve weergaven en leesbare beschrijvingen.
  • Drag-and-drop interfaces: lever alternatieve keyboard-bediening en duidelijke instructies.

Mini-checklists voor implementatie

Designers (quick)

  • Focus zichtbaar en consistent
  • Contrast > AA (tekst) en voldoende voor UI-elementen
  • Touch-targets ≥ 44px waar relevant

Developers (quick)

  • Semantische HTML & correcte ARIA waar nodig
  • Geen inline handlers zonder keyboard-equivalent
  • Fallbacks voor dynamische content (ARIA-live regions waar relevant)

Redacties (quick)

  • Alt-teksten, koppen en linkteksten die zelfstandig context geven
  • Geen ‘klik hier’ zonder context
  • Controleer automatisch gegenereerde content op leesbaarheid

Praktische code- en testvoorbeelden

Skip link (voorbeeld)

<a class="skip-link" href="#main">Sla navigatie over</a><style>.skip-link{position:absolute;left:-999px}.skip-link:focus{position:static;left:auto;top:auto;background:#fff;padding:8px;z-index:9999}</style>

ARIA-live voorbeeld voor dynamische updates

<div id="cart" aria-live="polite">Je winkelwagen bevat 2 items</div>

Testscriptje (handmatig) — 5 minuten checklist

  1. Open pagina en zet keyboard-focus op de eerste link met Tab.
  2. Navigeer naar alle interactieve elementen; let op focus en labels.
  3. Activeer knoppen via Enter/Space; let op onverwachte modals of focusverlies.
  4. Controleer belangrijkste CTA op mobiele schermgrootte: is hij tappable?
  5. Draaien van onze WCAG checker/validator en download het rapport.

Gebruik onze WCAG checker/validator als eerste stap: hij geeft prioriteiten, concrete regels en voorbeelden per issue. Voor integratie in development: download onze plugin zodat checks automatisch draaien tijdens builds.

Wil je dat wij meedenken? Vul het contactformulier op wcagtool.nl — onze medewerkers beantwoorden het contactformulier altijd binnen 24 uur. Je kunt ons ook direct een demo van de plugin vragen of een quick-scan laten uitvoeren.

Laatste praktische tip: start klein maar meetbaar — kies één prioriteitspagina (bijv. checkout), voer de 5-minuten checklist uit, plak de snedige CSS/ARIA-snippets in je componenten, en koppel de WCAG checker in je pipeline. Herhaal dit per pagina en schaal op; zo maak je stap voor stap je hele site conform WCAG 2.2.