WCAG-checklist
WCAG 2.2 AA-checklist: wat controleer je op je website?
Deze checklist loopt de belangrijkste eisen van WCAG 2.2 niveau AA langs, gegroepeerd per onderwerp. Bij elk punt lees je wat het inhoudt en hoe je het in de praktijk aanpakt.
Zo gebruik je deze checklist
De checklist is een praktische samenvatting en vervangt de officiële WCAG-tekst niet. Niet elk succescriterium komt op elke website voor: een site zonder video heeft bijvoorbeeld niets aan de eisen voor ondertiteling.
Loop de lijst per paginatype door, zoals de homepage, een formulier, een productpagina en de inlogpagina, en noteer wat afwijkt. De cijfers tussen haakjes verwijzen naar het succescriterium in WCAG. Criteria die nieuw zijn in WCAG 2.2 staan er als zodanig bij.
Afbeeldingen, video en audio
Niet iedereen ziet of hoort je media. Alternatieven zorgen dat de inhoud voor iedereen beschikbaar is.
Alternatieve tekst bij afbeeldingen (1.1.1)
Elke informatieve afbeelding heeft een alt-tekst die dezelfde informatie of functie overbrengt. Decoratieve afbeeldingen krijgen een lege alt (alt="") zodat hulpsoftware ze overslaat.
Tip: Beschrijf wat de afbeelding op deze plek betekent, niet alleen wat erop staat. Een knop met alleen een icoon heeft een naam nodig, zoals 'Zoeken'.
Ondertitels, transcripties en audiodescriptie (1.2.x)
Video met geluid heeft ondertitels en audio zonder beeld heeft een transcriptie. Bij vooraf opgenomen video hoort op niveau AA ook audiodescriptie voor wat alleen te zien is.
Tip: Controleer automatisch gegenereerde ondertitels altijd handmatig, vooral op namen en vakjargon.
Geen tekst in afbeeldingen (1.4.5)
Gebruik echte tekst in plaats van tekst in een afbeelding, behalve voor logo's. Echte tekst schaalt mee, is te selecteren en wordt voorgelezen.
Tip: Zet koppen en knoppen niet in een bannerafbeelding, maar bouw ze met HTML en CSS.
Tekst, kleur en weergave
Goed leesbare tekst helpt iedereen, en is voor slechtzienden en mensen met kleurenblindheid onmisbaar.
Kleurcontrast (1.4.3 en 1.4.11)
Gewone tekst heeft minimaal 4,5:1 contrast met de achtergrond, grote tekst minimaal 3:1. Ook iconen, randen van invoervelden en andere onderdelen die je nodig hebt om te bedienen hebben minimaal 3:1.
Tip: Controleer de kleuren van je huisstijl één keer goed. Dat voorkomt problemen op elke pagina.
Kleur is niet de enige aanwijzing (1.4.1)
Gebruik kleur nooit als enige manier om iets duidelijk te maken, zoals een rode rand bij een fout of een gekleurde link in lopende tekst.
Tip: Voeg een symbool, een onderstreping of tekst toe, zoals 'Fout:' voor een foutmelding.
Vergroten en reflow (1.4.4 en 1.4.10)
Tekst kan tot 200% worden vergroot zonder dat inhoud verdwijnt. Bij een breedte van 320 CSS-pixels, wat overeenkomt met 400% zoom, is de pagina te lezen zonder horizontaal te scrollen. Tabellen en kaarten mogen wel scrollen.
Tip: Gebruik relatieve eenheden zoals rem en procenten, en laat blokken onder elkaar meebuigen.
Tekstafstand (1.4.12)
Als bezoekers de regelafstand, letterafstand of woordafstand vergroten, mag er geen tekst wegvallen of over andere tekst heen schuiven.
Tip: Geef tekstcontainers geen vaste hoogte.
Structuur, titels en taal
Een duidelijke structuur helpt screenreadergebruikers snel te navigeren en maakt je pagina's ook beter te scannen voor iedereen.
Koppen en structuur (1.3.1 en 2.4.6)
Gebruik echte koppen (h1 tot en met h6) in een logische volgorde die beschrijven waar een gedeelte over gaat. Markeer lijsten, tabellen en gebieden van de pagina met de juiste HTML.
Tip: Kies koppen op basis van de inhoud, niet op basis van de lettergrootte.
Paginatitel en taal (2.4.2, 3.1.1 en 3.1.2)
Elke pagina heeft een unieke, beschrijvende titel. De taal van de pagina is ingesteld, bijvoorbeeld lang="nl", en tekstdelen in een andere taal zijn gemarkeerd.
Tip: Zet het belangrijkste woord vooraan in de paginatitel.
Begrijpelijke linkteksten (2.4.4)
Uit de linktekst, eventueel samen met de zin eromheen, blijkt waar een link heen leidt. 'Klik hier' en 'lees meer' zijn zonder context onduidelijk.
Tip: Schrijf 'Lees meer over onze diensten' in plaats van alleen 'Lees meer'.
Toetsenbord en focus
Niet iedereen gebruikt een muis. Veel bezoekers werken met het toetsenbord, een schakelaar of spraakbesturing.
Alles werkt met het toetsenbord (2.1.1 en 2.1.2)
Alle functies zijn zonder muis te bedienen, en de focus komt nooit vast te zitten, bijvoorbeeld in een venster of widget.
Tip: Test met Tab, Shift+Tab, Enter, spatiebalk en Escape. Gebruik echte knoppen en links in plaats van klikbare div's.
Zichtbare focus die niet wordt afgedekt (2.4.7 en 2.4.11, nieuw)
Wie met het toetsenbord navigeert, ziet altijd waar de focus staat. Nieuw in WCAG 2.2 is dat het element met focus niet volledig verborgen mag zijn achter bijvoorbeeld een plakkende header of cookiebanner.
Tip: Verwijder de focusstijl nooit zonder een duidelijk alternatief. Controleer plakkende elementen met een scroll-padding.
Blokken kunnen worden overgeslagen (2.4.1)
Bezoekers kunnen herhaalde onderdelen zoals het menu overslaan. Meestal gebeurt dat met een 'Ga naar de inhoud'-link.
Tip: Maak de link zichtbaar zodra hij de focus krijgt.
Logische focusvolgorde (2.4.3)
De volgorde waarin het toetsenbord langs elementen gaat, volgt de betekenis en de visuele volgorde van de pagina.
Tip: Gebruik geen positieve tabindex-waarden en houd de volgorde in de HTML gelijk aan de volgorde op het scherm.
Formulieren en foutmeldingen
Formulieren zijn vaak het moment waarop een bezoek mislukt. Goede labels en foutmeldingen maken het verschil.
Labels en instructies (1.3.1, 3.3.2 en 4.1.2)
Elk invoerveld heeft een zichtbaar label dat ook technisch aan het veld is gekoppeld. Een placeholder is geen vervanger voor een label.
Tip: Gebruik het label-element met een for-attribuut en vermeld verwachte formaten, zoals een datum, vooraf.
Foutmeldingen die helpen (3.3.1 en 3.3.3)
Fouten worden in tekst benoemd, staan bij het betreffende veld en bevatten waar mogelijk een suggestie om ze te herstellen.
Tip: Verplaats de focus na het versturen naar een foutoverzicht of het eerste veld met een fout.
Automatisch invullen (1.3.5)
Velden voor persoonsgegevens, zoals naam en e-mailadres, hebben het juiste autocomplete-attribuut, zodat browsers en hulpmiddelen ze kunnen invullen.
Geen dubbele invoer (3.3.7, nieuw)
Vraag binnen hetzelfde proces niet twee keer om dezelfde gegevens. Vul gegevens die je al hebt vooraf in of laat de bezoeker ze kiezen.
Tip: Bied bij het afleveradres de optie 'Hetzelfde als factuuradres' aan.
Aanraken, slepen en bedienen op mobiel
WCAG 2.2 stelt extra eisen voor mensen met een beperkte motoriek en voor gebruik op een telefoon of tablet.
Voldoende grote aanraakdoelen (2.5.8, nieuw)
Klikbare doelen zijn minimaal 24 × 24 CSS-pixels groot of hebben voldoende ruimte eromheen. Er zijn uitzonderingen, bijvoorbeeld voor links in lopende tekst.
Tip: Maak knoppen op mobiel liever ruimer. Een doel van 44 × 44 pixels is een gangbare richtlijn.
Alternatief voor slepen (2.5.7, nieuw)
Functies die je met slepen bedient, zoals een schuifregelaar of het herordenen van een lijst, kun je ook met een enkele klik of tik bedienen.
Tip: Voeg knoppen toe zoals 'Omhoog' en 'Omlaag'.
Inloggen en hulp
Twee criteria die nieuw zijn in WCAG 2.2 maken inloggen en hulp vragen eenvoudiger, vooral voor mensen met een cognitieve beperking.
Toegankelijke authenticatie (3.3.8, nieuw)
Inloggen mag niet afhangen van een cognitieve test, zoals een wachtwoord onthouden of een puzzel oplossen, zonder alternatief. Plakken in wachtwoordvelden en het gebruik van een wachtwoordmanager moeten werken.
Tip: Sta plakken toe, gebruik de juiste autocomplete-waarden en bied waar mogelijk een alternatief zoals een inloglink of passkey.
Consistente hulp (3.2.6, nieuw)
Staat er op meerdere pagina's een hulpmogelijkheid, zoals een contactlink of chat, dan staat die steeds op dezelfde plek ten opzichte van de rest van de pagina.
Tip: Zet contact- en hulpinformatie in de vaste header of footer.
Dynamische onderdelen en meldingen
Eigen componenten en bewegende content vragen extra aandacht, omdat hulpsoftware ze niet vanzelf begrijpt.
Naam, rol en waarde (4.1.2)
Eigen componenten zoals tabbladen, dialogen en menu's geven hun naam, rol en status door aan hulpsoftware.
Tip: Gebruik waar mogelijk standaard HTML-elementen en voeg ARIA alleen toe als dat nodig is.
Statusmeldingen (4.1.3)
Meldingen zoals 'Toegevoegd aan winkelmand' of het aantal zoekresultaten worden voorgelezen zonder dat de focus verplaatst.
Tip: Gebruik role="status" of een aria-live-gebied voor zulke meldingen.
Bewegende content (2.2.2)
Content die automatisch beweegt, knippert of scrolt en langer dan vijf seconden duurt, kan worden gepauzeerd, gestopt of verborgen.
Tip: Laat carrousels niet automatisch doorlopen, of voeg een duidelijke pauzeknop toe.
Zo helpt AccessRadar bij deze checklist
Automatische tests van AccessRadar controleren veel van deze punten voor je, bijvoorbeeld ontbrekende alt-attributen of te weinig contrast. AI-contentanalyse beoordeelt daarnaast of teksten zinvol zijn: zegt een alt-tekst, linktekst, kop of label echt iets, of is het 'afbeelding', 'klik hier' of 'Info'?
Je ziet wekelijks wat er verbetert en wat nog aandacht vraagt. Vul de uitkomsten aan met handmatig onderzoek en feedback van mensen met een beperking voor een compleet beeld.
Automatische tests én AI-contentanalyse
AccessRadar combineert automatische tests met AI-contentanalyse. Zo zie je niet alleen technische fouten, maar ook welke teksten je bezoekers echt helpen.
De AI-analyse leest de tekst van je pagina's en geeft suggesties, bijvoorbeeld voor:
- Alternatieve teksten: zegt de tekst iets zinvols, of is het 'afbeelding', een bestandsnaam of 'klik hier'?
- Linkteksten: wordt uit de linktekst en de tekst eromheen duidelijk waar een link naartoe leidt?
- Koppen en labels: beschrijven ze het onderwerp of het veld, of zijn het lege woorden zoals 'Info' of 'Veld 1'?
- Paginatitels en formulieren: is duidelijk waar een pagina over gaat en wat een veld verwacht?
Je krijgt concrete suggesties voor betere teksten, die je direct oppakt in je wekelijkse verbeterplan. Zo groeit je website elke week verder naar WCAG 2.2 AA-geschiktheid en bereik je meer klanten.
Lees hoe tests en AI-analyse samenwerken in het verbeterplan
Lees ook
Praktische uitleg over WCAG en digitale toegankelijkheid.
Website toegankelijkheid testen: zo pak je het stap voor stap aan
Zo test je de toegankelijkheid van je website: stap voor stap met een automatische scan, toetsenbordtest, screenreader en de meest voorkomende problemen.
WCAG 2.1 versus 2.2: wat is er nieuw en wat moet je aanpassen?
Wat verandert er van WCAG 2.1 naar 2.2? Bekijk de negen nieuwe succescriteria, het vervallen criterium 4.1.1 en wat website-eigenaren moeten aanpassen.
WCAG 2.2 uitgelegd: de toegankelijkheidsrichtlijnen voor websites
Wat is WCAG 2.2? Lees wat de niveaus A, AA en AAA betekenen, welke eisen centraal staan en waarom toegankelijkheid voor je website belangrijk is.
Controleer je website gratis op WCAG
Vraag de gratis WCAG-check van AccessRadar aan en ontvang de resultaten van een automatische scan per e-mail, als startpunt voor je verbeterpunten.
Wil je daarna elke week verder? Het WCAG-verbeterplan voegt wekelijkse scans en AI-contentanalyse toe.
Een WCAG-scan ondersteunt je beoordeling. Een automatische WCAG-scan kan volledige WCAG 2.2 AA-geschiktheid niet vaststellen. Combineer regelmatige WCAG-scans met handmatig onderzoek en feedback van mensen met een beperking.
Veelgestelde vragen over de WCAG-checklist
Wat is het verschil tussen een WCAG-checklist en een WCAG-scan?
Een checklist is een lijst met punten die je zelf langsloopt en beoordeelt. Een scan is een geautomatiseerde test die een deel van die punten controleert, bij AccessRadar aangevuld met AI-contentanalyse voor onder meer alt-teksten en linkteksten. Gebruik ze samen: de scan vindt snel veelvoorkomende fouten, de checklist helpt bij wat een mens moet beoordelen.
Welke criteria moet ik halen voor niveau AA?
Niveau AA omvat alle criteria van niveau A en niveau AA. Criteria van niveau AAA hoef je niet te halen voor AA, al kun je ze waar het past wel toepassen.
Moet mijn hele website voldoen of alleen de belangrijkste pagina's?
Conformiteit geldt per volledige pagina en voor complete processen, zoals een bestelproces. Een pagina voldoet alleen als alle onderdelen ervan voldoen. In de praktijk begin je met de pagina's en processen die bezoekers het meest gebruiken.
Is deze checklist genoeg om aan de wet te voldoen?
De checklist is een praktische route naar WCAG 2.2 AA. Wetgeving zoals de European Accessibility Act verwijst naar de Europese norm EN 301 549, die webcontent koppelt aan WCAG. Voor jouw situatie kan een toegankelijkheidsexpert of jurist je verder helpen.
Voldoe ik aan WCAG 2.1 als ik WCAG 2.2 AA haal?
In de praktijk wel. WCAG 2.2 bouwt voort op 2.1 en voegt criteria toe, dus wie 2.2 haalt, haalt ook 2.1.