WCAG 2.2: de nieuwe toegankelijkheidseisen voor uw website uitgelegd

Wie zich verdiept in de toegankelijkheid van zijn website, komt al snel de afkorting WCAG tegen: de Web Content Accessibility Guidelines van het W3C, de organisatie achter de webstandaarden. Lange tijd was versie 2.1 het uitgangspunt. In oktober 2023 verscheen WCAG 2.2, met negen nieuwe criteria. In dit artikel leest u wat er veranderd is, wat het voor een gewone bedrijfswebsite betekent en hoe u het controleert.

Bent u nog niet bekend met de basis, lees dan eerst de basis van website-toegankelijkheid. Dit artikel gaat over wat er bovenop komt.

Wat is er nieuw in WCAG 2.2?

WCAG 2.2 bouwt voort op 2.1: alles wat in 2.1 stond, blijft gelden, met één uitzondering (zie verderop). De nieuwe criteria richten zich vooral op mensen met een motorische, visuele of cognitieve beperking, en op het gebruik van touchscreens. Voor niveau AA, het niveau waar de meeste organisaties naar streven, zijn dit de belangrijkste toevoegingen:

Focus mag niet verstopt zijn

Wie met het toetsenbord door een pagina navigeert, ziet een kader rond de knop of link die actief is. Dat kader mag niet volledig onder een vaste balk verdwijnen, zoals een plakkende header, een chatknop of een cookiemelding. Op veel WordPress-sites met een “sticky” menu is dit een echte valkuil.

Slepen moet ook anders kunnen

Elke handeling die slepen vraagt, zoals een schuifregelaar voor een prijsfilter of het sorteren van items, moet ook met een enkele klik of tik kunnen. Denk aan een prijsfilter met twee invulvelden naast de schuifregelaar.

Klikdoelen van minimaal 24 bij 24 pixels

Knoppen, links en pictogrammen moeten groot genoeg zijn om te raken, of genoeg ruimte om zich heen hebben. Kleine sociale-mediapictogrammen dicht op elkaar, of een kruisje van een paar pixels om een melding te sluiten, voldoen vaak niet.

Hulp staat op een vaste plek

Biedt u op meerdere pagina’s hulp aan, zoals een telefoonnummer, een contactlink of een chatknop, dan moet die steeds op dezelfde plek staan. Een contactlink die op de ene pagina in de header staat en op de andere alleen in de footer, is verwarrend.

Niet twee keer hetzelfde invullen

Heeft een bezoeker in een formulier al iets ingevuld, dan hoeft hij dat in dezelfde stap of sessie niet opnieuw te typen. Voor webshops: is het afleveradres gelijk aan het factuuradres, bied dan een vinkje “zelfde als afleveradres” aan.

Inloggen zonder puzzel

Inloggen mag niet afhangen van iets onthouden of overtypen zonder hulpmiddel. Concreet: plakken in het wachtwoordveld moet mogelijk zijn, zodat een wachtwoordbeheerder werkt, en een captcha met vervormde letters mag niet de enige weg zijn. Inloggen via een link in de e-mail of met een passkey is wel toegestaan.

Wat is er vervallen?

Het criterium 4.1.1 “Parsing”, dat eiste dat de HTML-code technisch foutloos was, is geschrapt. Moderne browsers en hulpsoftware gaan zelf goed om met kleine codefouten. Dat betekent niet dat slordige code nu mag; wel dat een validatiefout op zichzelf geen toegankelijkheidsprobleem meer is.

Geldt WCAG 2.2 voor u?

Voor de meeste bedrijven is WCAG geen wet op zich, maar de norm waarnaar wetten verwijzen. Voor overheden en voor webshops die onder de Europese toegankelijkheidswet vallen, telt in de praktijk de Europese norm EN 301 549, die op WCAG is gebaseerd. Ook als u niet verplicht bent, is 2.2 een goed uitgangspunt: wie aan 2.2 voldoet, voldoet automatisch ook aan 2.1.

Zo controleert u uw WordPress-site

1. Toetsenbordtest met de sticky header. Tab door een lange pagina en kijk of het focuskader ooit volledig onder de vaste balk of een chatknop verdwijnt.
2. Meet uw kleinste knoppen. Open de pagina op een telefoon en kijk naar sluitkruisjes, pictogrammen in de footer en paginanummers. Met de ontwikkelaarstools van de browser ziet u de afmetingen.
3. Loop uw formulieren door. Kan plakken in het wachtwoordveld? Moet een klant ergens dezelfde gegevens twee keer invullen? Is er een alternatief voor de captcha?
4. Zoek naar sleepfuncties. Schuifregelaars, sorteerbare lijsten en kaartjes die u moet slepen: is er een alternatief met klikken?
5. Kijk naar de plek van uw contactgegevens. Staat de hulp-optie overal op dezelfde plek?

Automatische testtools herkennen nog niet alle nieuwe criteria, vooral niet de focus onder vaste elementen. Handmatig kijken blijft nodig.

Wat u zelf doet en wanneer u hulp inschakelt

De controles hierboven kunt u in een uur zelf uitvoeren. Aanpassingen aan een sticky header, knopgroottes in het thema of de werking van een filterplugin zijn technisch werk. Dat nemen wij mee in onze WordPress-support, en in het onderhoud controleren wij na grote thema-updates of de focus en de knoppen nog voldoen.