WCAG 2.2-chec­klist: 20 punten die je zelf kunt testen

Deze WCAG 2.2-checklist bevat 20 punten die je zelf kunt testen zonder specialistische software: je hebt alleen je toetsenbord, de zoomfunctie van je browser, een contrastchecker en een gratis screenreader nodig. Je dekt er niet de hele norm mee af, maar wel de fouten die bezoekers het vaakst blokkeren. Plan er een middag voor en test je belangrijkste pagina’s, niet alleen de homepage.

Wat is er nieuw in WCAG 2.2?

WCAG 2.2 werd op 5 oktober 2023 een officiële W3C-aanbeveling. De versie bevat alles uit WCAG 2.1, met twee wijzigingen: criterium 4.1.1 Parsing is als verouderd geschrapt en er zijn negen nieuwe succescriteria bijgekomen. Zes daarvan vallen onder niveau A of AA:

• 2.4.11 Focus Not Obscured (Minimum), niveau AA;
• 2.5.7 Dragging Movements, niveau AA;
• 2.5.8 Target Size (Minimum), niveau AA;
• 3.2.6 Consistent Help, niveau A;
• 3.3.7 Redundant Entry, niveau A;
• 3.3.8 Accessible Authentication (Minimum), niveau AA.

Waarom nu? Voor bedrijven onder de European Accessibility Act hanteert de ACM WCAG 2.1 niveau AA als basis, maar adviseert ze nu al met WCAG 2.2 te werken. Wie vandaag test, kan dus beter meteen tegen 2.2 testen.

De WCAG 2.2-chec­klist: 20 punten

Af­beel­din­gen en media

1. Teks­tal­ter­na­tie­ven (1.1.1, A). Elke informatieve afbeelding heeft een alt-tekst die zegt wat de afbeelding toont of doet. Decoratieve afbeeldingen hebben een lege alt. Test: bekijk de alt-teksten met de inspector of laat een screenreader de pagina voorlezen.
2. On­der­ti­te­ling (1.2.2, A). Video’s met geluid hebben ondertiteling. Test: speel elke video af met het geluid uit. Begrijp je nog wat er gezegd wordt?
3. Pauzeren, stoppen, ver­ber­gen (2.2.2, A). Alles wat automatisch beweegt en langer dan vijf seconden duurt, zoals een carrousel of bewegende banner, kun je pauzeren. Test: zoek de pauzeknop en bedien hem met het toetsenbord.

Struc­tuur en taal

4. Koppen en relaties (1.3.1, A). Wat er visueel als kop uitziet, is ook in de code een kop, in een logische volgorde. Lijsten zijn echte lijsten en tabellen hebben kopcellen. Test: spring met een screenreader van kop naar kop en kijk of de inhoudsopgave klopt.
5. Taal van de pagina (3.1.1, A). Het lang-attribuut staat goed, bijvoorbeeld lang="nl". Test: bekijk de broncode bovenaan de pagina.
6. Linkdoel (2.4.4, A). Uit de linktekst, eventueel met de zin eromheen, blijkt waar een link naartoe gaat. Tien keer “Lees meer” helpt niemand. Test: laat een screenreader alle links op een rij tonen.

Kleur, contrast en zoom

7. Tekst­con­trast (1.4.3, AA). Gewone tekst heeft een contrastverhouding van minimaal 4,5:1 met de achtergrond, grote tekst minimaal 3:1. Test: meet tekst op foto’s, lichtgrijze placeholders en knoppen met een contrastchecker.
8. Contrast van be­dien­ing­se­le­men­ten (1.4.11, AA). Randen van invoervelden, iconen en focusindicatoren halen minimaal 3:1 tegen de omgeving. Test: meet de rand van een leeg invoerveld.
9. Niet alleen kleur (1.4.1, A). Informatie wordt niet alleen met kleur overgebracht, zoals een rood veld bij een fout of een gekleurde link zonder onderstreping in lopende tekst. Test: bekijk de pagina in grijstinten.
10. Reflow (1.4.10, AA). Op 320 CSS-pixels breed werkt alles zonder horizontaal scrollen, behalve onderdelen die echt twee dimensies nodig hebben, zoals een grote tabel. Test: zoom je browser in tot 400 procent op een venster van 1280 pixels breed. Controleer daarnaast of tekst op 200 procent zoom nog volledig leesbaar is (1.4.4).
11. Teks­tafs­tand (1.4.12, AA). Er valt niets weg als een gebruiker de regelhoogte op 1,5 keer de lettergrootte zet, alinea-afstand op 2 keer, letterafstand op 0,12 keer en woordafstand op 0,16 keer. Test: zet die waarden tijdelijk in de inspector of met een bookmarklet en kijk of knoppen en kaarten tekst afkappen.

Toet­sen­bord en focus

12. Volledig be­dien­baar met toet­sen­bord, zonder valkuil (2.1.1 en 2.1.2, A). Menu’s, filters, tabbladen, dialogen en sliders werken met Tab, Shift+Tab, Enter, spatie en pijltjestoetsen, en je kunt overal ook weer uit. Test: leg je muis weg en doorloop je belangrijkste taken.
13. Zicht­bare focus (2.4.7, AA). Je ziet altijd waar de focus is. Let op outline: none in je CSS zonder vervangende stijl. Test: tab door de pagina en raak de focus geen moment kwijt. Let daarbij ook op een logische volgorde (2.4.3).
14. Focus niet ver­bor­gen (2.4.11, AA, nieuw). Een element met focus wordt niet volledig bedekt door je eigen content, zoals een sticky header, chatknop of cookiebanner. Test: tab naar beneden op een lange pagina met de sticky header zichtbaar. Met scroll-padding-top in CSS los je dit vaak op.

Aan­wij­zen met muis of vinger

15. Doel­grootte (2.5.8, AA, nieuw). Klikdoelen zijn minimaal 24 bij 24 CSS-pixels, of hebben genoeg ruimte om zich heen. Links in een lopende zin zijn uitgezonderd. Test: meet kleine iconen, sluitkruisjes en paginanummers in de inspector.
16. Slepen (2.5.7, AA, nieuw). Alles wat je kunt slepen, zoals een prijsslider of het sorteren van items, werkt ook met losse klikken of tikken. Test: probeer elke sleepfunctie te bedienen zonder te slepen.

For­mu­lie­ren, hulp en inloggen

17. Labels en in­voer­doel (3.3.2, A en 1.3.5, AA). Elk veld heeft een zichtbaar label, en velden voor persoonsgegevens hebben de juiste autocomplete-waarde. Test: klik op het label: springt de cursor naar het veld? Meer over goede formulieren lees je in formulieren die converteren.
18. Fout­mel­din­gen (3.3.1, A). Bij een fout wordt in tekst gezegd welk veld fout is en wat er mis is. Test: verstuur een leeg formulier en luister of de screenreader de fouten meldt.
19. Geen dubbele invoer (3.3.7, A, nieuw). Informatie die iemand eerder in hetzelfde proces invulde, wordt automatisch ingevuld of is te selecteren. Test: doorloop je checkout of aanvraagformulier en noteer elke keer dat je iets opnieuw typt.
20. Toe­gan­ke­lijke au­then­ti­ca­tie (3.3.8, AA, nieuw). Inloggen vraagt geen geheugentest of puzzel zonder alternatief. Plakken in het wachtwoordveld werkt, zodat wachtwoordmanagers bruikbaar zijn. Test: log in met een wachtwoordmanager en probeer elke CAPTCHA zonder puzzel te passeren.

Een bonuspunt dat snel te controleren is: staat je hulp, zoals een telefoonnummer, chat of FAQ-link, op elke pagina op dezelfde plek? Dat vraagt 3.2.6 Consistent Help.

Wat je hiermee niet afdekt

Deze lijst is een begin, geen audit. Een aantal criteria vraagt meer kennis of tijd:

De volledige lijst met criteria en uitzonderingen staat in de WCAG 2.2-specificatie.

Zo pak je het aan

1. Kies vijf tot tien pagina’s: homepage, een categorie- of overzichtspagina, een detailpagina, je formulier of checkout en je toegankelijkheidsverklaring.
2. Draai eerst een au­to­ma­ti­sche scan. Met een gratis WCAG-scan vang je de technische fouten, zodat je handmatige test over de rest gaat.
3. Loop de 20 punten langs en noteer per fout de pagina, het criterium en de impact: blokkeert het een taak of is het hinderlijk?
4. Los blok­ka­des eerst op. Voor webshops staat in toegankelijke webshop welke stappen het meest kritiek zijn.
5. Werk je ver­kla­ring bij. Noem welke norm je aanhoudt en wat nog openstaat, zoals beschreven in toegankelijkheidsverklaring maken.
6. Herhaal bij elke release. Vooral punt 12, 13 en 14 breken makkelijk bij een nieuw component.

Con­clu­sie

Met deze WCAG 2.2-checklist vind je zonder dure tools de meeste blokkades die echte bezoekers tegenkomen. Begin bij het toetsenbord, want daar zie je het snelst waar bezoekers vastlopen. Twijfel je over wat je vindt, of wil je zeker weten dat je niets mist, laat dan een volledige audit doen.

Wil je dat iemand de hele norm voor je doorloopt en de fouten herstelt? Bekijk onze audit en herstel voor digitale toegankelijkheid.