Website & Development
WCAG 2.1 AA uitgelegd: checklist voor marketingteams (en wat 2.2 toevoegt)
Kopieer voor AI
Een WCAG-checklist zet de toegankelijkheidsrichtlijnen om in controlepunten die je zelf afvinkt.
Heeft je tekst genoeg contrast? Werkt alles met het toetsenbord? Begrijpt een screenreader je formulieren? Dat soort vragen.
Het verdict: WCAG 2.1 AA is het juridische ijkpunt in Europa, maar bouw naar WCAG 2.2 AA. Dan zit je voor beide goed.
Hieronder: wat AA concreet vraagt, wie in je marketingteam welk criterium bezit, en een checklist per thema.
Je ziet ook welke audit-tools (zoals WAVE en axe) het zware werk doen, en waar handmatig testen onmisbaar blijft.
Wat is WCAG 2.1 AA, en wat voegt 2.2 toe?
WCAG 2.1 AA is de set van 50 succescriteria die een pagina moet halen voor niveau AA.
WCAG 2.1 in het kort
WCAG 2.1 verscheen op 5 juni 2018 als W3C-aanbeveling. De norm ordent toegankelijkheid in 13 richtlijnen onder vier principes.
Elke richtlijn heeft toetsbare succescriteria op drie niveaus. Voor niveau AA haalt een pagina alle criteria van niveau A en AA. In WCAG 2.1 zijn dat er 50.
Dat is ook het niveau dat telt voor de European Accessibility Act. De Europese norm EN 301 549 neemt WCAG 2.1 AA over voor webcontent.
Wie eraan moet voldoen, lees je in onze uitleg over de European Accessibility Act. De officiële tekst bestaat ook in een Nederlandse vertaling van het W3C.
De drie niveaus: A, AA en AAA
WCAG 2.2 is de actuele versie en telt 86 succescriteria, verdeeld over drie niveaus:
- Niveau A: het absolute minimum.
- Niveau AA: alle A- en AA-criteria samen, de praktische norm.
- Niveau AAA: het strengst, en vaak niet haalbaar voor een hele site.
AA is streng genoeg om echt bruikbaar te zijn en realistisch genoeg om vol te houden.
Wat verandert er in WCAG 2.2?
Versie 2.2 voegde negen nieuwe succescriteria toe ten opzichte van 2.1. Het verouderde criterium 4.1.1 (parsing) werd geschrapt.
Volgens het W3C is content die aan WCAG 2.2 voldoet ook conform met 2.1 en 2.0. WCAG 2.2 verscheen op 5 oktober 2023.
Bouw je naar 2.2 AA, dan zit je dus ook goed voor het juridische ijkpunt.
Een aantal nieuwe criteria is direct relevant voor marketingsites:
- Klikdoelen: een minimale grootte voor knoppen en links.
- Zichtbare focus: de focus mag niet verborgen raken achter een sticky balk.
- Eenvoudiger inloggen: authenticatie zonder geheugenpuzzel.
Hoe groot is groot genoeg? Het W3C-criterium 2.5.8 vraagt op niveau AA minstens 24 bij 24 CSS-pixels per klikdoel, met een paar uitzonderingen zoals links in lopende tekst.
POUR: het kapstokje
De richtlijnen draaien om vier principes, samengevat als POUR. Content moet waarneembaar, bedienbaar, begrijpelijk en robuust zijn.
Twijfel je waar een probleem onder valt? Hang het aan een van die vier woorden.
Wie in je marketingteam bezit welk criterium?
De meeste fouten ontstaan bij het publiceren, niet bij het bouwen.
Toegankelijkheid strandt vaak omdat iedereen denkt dat de developer het oplost. In werkelijkheid gaat het mis in de dagelijkse routine:
- een afbeelding zonder alt-tekst
- een knop in een campagnekleur met te weinig contrast
- een PDF die niemand controleerde
Deze tabel koppelt de WCAG 2.1 AA-criteria die op marketingsites het vaakst misgaan aan de rol die ze kan voorkomen:
| Criterium (WCAG 2.1) | Wat het vraagt | Eigenaar |
|---|---|---|
| 1.1.1 Niet-tekstuele content (A) | Een tekstalternatief voor elke inhoudelijke afbeelding, grafiek of icoonknop | Contentredactie |
| 1.2.2 Ondertiteling (A) | Ondertitels bij video met spraak | Contentredactie, video |
| 1.3.1 Info en relaties (A) | Koppen, lijsten en tabellen in echte HTML-structuur, niet alleen visueel | Developer, redactie |
| 1.3.5 Doel van invoer bepalen (AA) | Velden zoals naam en e-mail technisch herkenbaar, zodat browsers ze kunnen invullen | Developer |
| 1.4.3 Contrast minimum (AA) | Minstens 4,5:1 voor tekst, 3:1 voor grote tekst | Design, merk |
| 1.4.4 Tekst herschalen (AA) | Tekst tot 200% vergroten zonder verlies van content | Design, developer |
| 1.4.10 Reflow (AA) | Bruikbaar op een breedte van 320 CSS-pixels zonder horizontaal scrollen | Design, developer |
| 1.4.11 Contrast niet-tekstuele content (AA) | Minstens 3:1 voor knoppen, invoervelden en grafische elementen | Design |
| 2.1.1 Toetsenbord (A) | Alle functies bedienbaar met het toetsenbord | Developer |
| 2.4.4 Linkdoel (A) | Linktekst die zegt waar je terechtkomt | Contentredactie |
| 2.4.7 Focus zichtbaar (AA) | Een zichtbare focusindicator | Design, developer |
| 3.3.1 en 3.3.2 Fouten en labels (A) | Duidelijke labels, instructies en foutmeldingen in formulieren | Marketing, developer |
| 4.1.2 Naam, rol, waarde (A) | Knoppen, menu’s en sliders die een schermlezer correct benoemt | Developer |
De criteriumteksten vind je in de WCAG 2.1-specificatie.
Zo verdeel je het werk
Contentredactie: alt-teksten, ondertitels, linkteksten en koppenstructuur bij elke publicatie.
Design en merk: contrast, focusstijl en klikdoelen, vastgelegd in je huisstijl. Hulp bij die keuze vind je in een kleurenpalet voor je B2B-website.
Developer: toetsenbord, HTML-structuur, formuliercode en componenten zoals menu’s en sliders.
Vuistregel: geef elke rol zijn eigen regels in je publicatieproces. Dan hoeft niemand de volledige norm uit het hoofd te kennen.
Welke fouten komen het vaakst voor?
Zes fouttypes verklaren het grootste deel van wat een scan vindt.
WebAIM scant elk jaar een miljoen homepages. In de WebAIM Million van 2026 had 95,9% van die homepages detecteerbare WCAG-fouten, gemiddeld 56,1 per pagina.
De top zes ziet er zo uit:
Wat dat voor je team betekent
Vijf van die zes fouten ontstaan in content en design, niet in de code.
Contrast hoort bij je merk. Alt-tekst en lege links horen bij de redactie. Formulierlabels horen bij wie het formulier opzet.
Let op: WebAIM schrijft er zelf bij dat een scan zonder fouten nog niet betekent dat een pagina toegankelijk is.
Meer voorbeelden staan in onze lijst met fouten in webtoegankelijkheid.
Welke controlepunten staan op de checklist?
De kern van een WCAG 2.2 AA-checklist valt uiteen in vijf thema’s.
Loop ze per pagina na. Begin bij je belangrijkste templates: homepage, dienstenpagina, contactpagina en blogartikel.
Kleur en contrast
Normale tekst heeft volgens het W3C minstens 4,5:1 contrast met de achtergrond. Grote tekst minstens 3:1.
Drie checks:
- Haalt je bodytekst 4,5:1, ook op gekleurde vlakken?
- Is kleur nooit de enige drager van informatie?
- Blijven knoppen en velden zichtbaar in hover- en focusstatus?
Voorbeeld: een foutmelding is niet alleen rood, maar krijgt ook tekst of een icoon.
Tekst en structuur
Koppen volgen een logische hiërarchie: één H1, daaronder H2’s, zonder niveaus over te slaan.
Links hebben een beschrijvende tekst. Vermijd losse “lees meer”-links zonder context.
Tekst blijft leesbaar als je inzoomt tot 200 procent, zonder dat content wegvalt of overlapt.
Afbeeldingen en media
Inhoudelijke afbeeldingen krijgen een zinvolle alt-tekst. Puur decoratieve afbeeldingen krijgen een lege alt, zodat een screenreader ze overslaat.
Video’s met spraak krijgen ondertiteling.
Toetsenbord en focus
Alles wat met de muis werkt, werkt ook met alleen het toetsenbord: Tab, Enter en de pijltjes.
De focusvolgorde is logisch en de focusindicator is altijd zichtbaar. Ook als er een sticky header bovenaan staat, een nieuw aandachtspunt in 2.2.
Er zit geen toetsenbordval in: je kunt overal weer uit weg navigeren.
Formulieren
Elk veld heeft een zichtbaar, gekoppeld label, niet alleen een placeholder.
Foutmeldingen benoemen wat er misging en hoe je het oplost.
Klikbare elementen zijn groot genoeg om op mobiel comfortabel te raken. Reken met minstens 24 bij 24 CSS-pixels.
Waarom de laatste twee je conversie raken
Een formulier dat onduidelijk is voor een screenreader-gebruiker, is meestal ook verwarrend voor een gehaaste bezoeker.
Meer daarover lees je in onze gids over conversie-optimalisatie van formulieren.
Voor de teksten rond je velden helpt microcopy en UX-writing.
Hoe test je dit met audit-tools zoals WAVE en axe?
Begin met een geautomatiseerde scan: die vindt in minuten een flink deel van de technische fouten.
De gratis tools
Drie tools dekken het meeste werk:
- WAVE (van WebAIM): een browser-extensie die fouten op de pagina zelf markeert.
- axe DevTools (van Deque): een extensie in je ontwikkelaarstools.
- Lighthouse: ingebouwd in Chrome, met een toegankelijkheidsscore.
Je opent een pagina en krijgt direct een overzicht van fouten, waarschuwingen en de structuur.
Hoe je die Lighthouse-rapporten leest, staat in onze uitleg over Google Lighthouse.
Lighthouse via PageSpeed Insights
PageSpeed Insights draait Lighthouse in de browser, zonder installatie.
Bovenaan staan de velddata van echte bezoekers. Lager in hetzelfde rapport volgt de toegankelijkheidsscore met de gevonden fouten:
Onze eigen mobiele velddata in PageSpeed Insights, oktober 2026. De toegankelijkheidscontrole van Lighthouse staat lager in hetzelfde rapport.
Tip: gebruik de toegankelijkheidsscore als signaal, niet als bewijs van conformiteit.
Een hele site crawlen
Een extensie test één pagina tegelijk. Voor honderden pagina’s gebruik je een crawler.
Screaming Frog SEO Spider gebruikt volgens zijn eigen productpagina de open-source axe-regels om tegen WCAG te testen. De crawler vindt ook afbeeldingen zonder alt-tekst:
De productpagina van Screaming Frog SEO Spider, oktober 2026. De gratis versie crawlt 500 URL’s per keer.
Wat scans wel en niet vinden
Wat deze tools goed opsporen:
- ontbrekende alt-teksten
- te laag contrast
- ontbrekende formulierlabels
- een foute koppenstructuur
Wat ze niet kunnen: beoordelen of een alt-tekst inhoudelijk klopt, of de focusvolgorde logisch aanvoelt, of een foutmelding echt begrijpelijk is.
Daarom is de realistische verwachting dat geautomatiseerde tools grofweg een derde tot de helft van de problemen vangen. Ze zijn een vertrekpunt, geen eindstation.
De praktische werkwijze
- Draai WAVE of axe over je belangrijkste paginatypes.
- Los de gemelde fouten op.
- Gebruik de waarschuwingen als checklist voor handmatige controle.
Wil je zonder installatie een eerste beeld? Gebruik onze toegankelijkheidscheck.
Die test je homepage, een productpagina en een formulier op automatisch detecteerbare WCAG-fouten.
Waar blijft handmatig testen nodig?
Bij alles wat context vraagt: alleen een mens beoordeelt of iets echt werkt.
De meest impactvolle toegankelijkheidsproblemen zijn contextueel. Drie checks doe je zonder veel voorkennis zelf.
1. De toetsenbordtest
Leg je muis weg.
Navigeer een belangrijke flow, bijvoorbeeld van homepage naar contactformulier, met alleen Tab, Shift+Tab en Enter.
Stel jezelf drie vragen:
- Kun je overal komen?
- Zie je steeds waar de focus staat?
- Kun je het formulier verzenden?
Zo niet, dan heb je een blokkade gevonden die geen scan oppikt.
2. De screenreader-test
Zet een screenreader aan: VoiceOver op Mac, of het gratis NVDA op Windows. Laat een pagina voorlezen.
Klinken je links en knoppen logisch los van hun context?
Worden afbeeldingen zinvol beschreven?
Dit voelt onwennig. Maar twintig minuten leert je enorm veel.
3. De zoom- en mobieltest
Zoom in tot 200 procent en bekijk de pagina op een smal scherm.
Blijft alles leesbaar en bruikbaar, of valt er content weg?
Voor die smalle schermen helpt onze gids over mobiele conversie op een B2B-website.
Wanneer schakel je een specialist in?
Voor een volledige audit of een juridisch onderbouwd conformiteitsrapport schakel je een gespecialiseerde tester in. Vaak is dat iemand die zelf met hulptechnologie werkt.
Maar het meeste laaghangend fruit pluk je met deze handmatige checks zelf.
| Wat wil je weten? | Aanpak | Wie |
|---|---|---|
| Technische fouten per pagina | WAVE, axe of Lighthouse | Redactie, developer |
| Fouten over de hele site | Crawler met axe-regels | Developer |
| Werkt de flow zonder muis? | Toetsenbordtest | Iedereen in het team |
| Klinkt de pagina logisch? | Screenreader-test | Redactie, developer |
| Conformiteitsrapport voor de EAA | Externe audit | Specialist |
Een bredere aanpak in stappen vind je in je website toegankelijk maken.
Waarom is dit relevant voor B2B-marketeers?
Om twee redenen: het helpt je conversie, en het wordt steeds vaker een vereiste.
De wet: de European Accessibility Act
De European Accessibility Act is sinds 28 juni 2025 van kracht. Ze verplicht een groeiende groep organisaties om hun digitale diensten toegankelijk te maken.
De wet richt zich vooral op consumentgerichte producten en diensten. Niet elke pure B2B-site valt dus binnen de strikte juridische scope.
Maar de richting is duidelijk: toegankelijkheid verschuift van nice-to-have naar standaardverwachting. Voor publieke instellingen geldt al langer een verplichting.
Hoe je van die verplichting zelfs een bron van aanvragen maakt, lees je in de EAA als leadbron.
De praktijk: meer leads
Belangrijker voor het dagelijkse werk is het effect op leads.
Dezelfde dingen die een site toegankelijk maken, maken hem ook prettiger voor iedereen:
- leesbare tekst
- duidelijke knoppen
- logische navigatie
- formulieren die in één keer goed gaan
Daar sturen wij bij Customer Impact op: een site die bezoekers omzet in aanvragen, niet in vanity-statistieken.
Een logische, toegankelijke menustructuur helpt daar direct bij. Zie ook onze gids over website-navigatie en onze UX best practices voor B2B.
Bouw het mee in
Toegankelijkheid hoeft geen apart project te zijn. Bouw het mee in als onderdeel van een doordachte, conversiegerichte website, en het kost veel minder dan achteraf repareren.
Het hoort thuis in de bredere aanpak uit de B2B-website gids.
Veelgestelde vragen
Wat is het verschil tussen WCAG 2.1 AA en WCAG 2.2 AA?
WCAG 2.2 voegt negen criteria toe, onder meer over de minimale grootte van klikdoelen, focus die niet verborgen mag zijn en eenvoudiger inloggen, en schrapt het verouderde criterium 4.1.1. Alles wat aan 2.2 voldoet, voldoet ook aan 2.1.
Moet mijn website WCAG 2.1 AA halen?
Valt je site onder de European Accessibility Act, bijvoorbeeld omdat consumenten er online kopen of boeken, dan is WCAG 2.1 AA in de praktijk het ijkpunt. Een louter informatieve B2B-site valt meestal buiten die verplichting, maar dezelfde criteria maken je site wel bruikbaarder.
Hoeveel van de fouten vindt een automatische tool?
Een deel. Ontbrekende labels, alt-attributen en te laag contrast vindt een tool betrouwbaar. Of een alt-tekst klopt, of de focusvolgorde logisch is en of een foutmelding begrijpelijk is, beoordeelt alleen een mens.
Moet ik ook mijn toegankelijkheid publiek melden?
Bedrijven onder de EAA moeten beschrijven hoe hun dienst aan de eisen voldoet. Veel organisaties doen dat met een toegankelijkheidsverklaring; hoe die eruitziet, lees je in onze gids over de toegankelijkheidsverklaring.
De korte samenvatting
WCAG 2.1 AA is het juridische ijkpunt, WCAG 2.2 AA de versie waar je best naartoe bouwt.
Verdeel de criteria over redactie, design en development. Werk daarna in twee lagen:
- Laat WAVE of axe de technische fouten opsporen.
- Doe zelf de toetsenbord-, screenreader- en zoomtest.
Begin bij je belangrijkste paginatypes en je conversiepunten. Daar levert toegankelijkheid meteen ook betere resultaten op.
Wil je je website laten nakijken op toegankelijkheid en conversie tegelijk? Bekijk onze aanpak voor digitale toegankelijkheid of neem contact op.
Gratis website-scan
Geef je website in en krijg binnen enkele minuten een automatische scan met concrete technische en SEO-verbeterpunten. Geen verkooppraatje.
Je gegevens gebruiken we alleen voor je scan. Geen spam, uitschrijven kan altijd.