WCAG uitgelegd
Heldere uitleg van WCAG 2.2 succescriteria. Per criterium lees je wat het betekent, waarom het belangrijk is en hoe je eraan voldoet.
Op deze pagina vind je onze uitleg van WCAG 2.2, stap voor stap. Per succescriterium lees je in gewone taal wat de regel betekent, waar het in de praktijk misgaat en hoe je het zelf kunt controleren.
De artikelen zijn geschreven voor developers, designers en webredacties die digitale toegankelijkheid concreet willen verbeteren — zonder te verdwalen in normteksten.
Wil je weten hoe je website er in de praktijk voor staat? Lees wat je krijgt bij een toegankelijkheidsaudit.
Toggle-knop zonder status
Een knop: “Donkere modus.” Je klikt. De achtergrond wordt donker. Visueel is het duidelijk: donkere modus is aan.
Paginering: "1", "2", "3"
Link: “1”. Link: “2”. Link: “3”. Eén, twee, drie wat? Pagina’s? Producten? Stappen?
Skiplink die de focus niet verplaatst
“Ga naar inhoud.” Je drukt op Enter. De pagina scrollt naar de content. Mooi.
CAPTCHA die niet met het toetsenbord werkt
“Bewijs dat je geen robot bent.” Klik op alle afbeeldingen met een verkeerslicht. Sleep het puzzelstukje naar de juiste plek. Teken het patroon na.
Eenvoudige tabel die onnodig horizontaal scrollt
Openingstijden. Twee kolommen. Dag en tijd. Maandag: 09:00 - 17:00 Dinsdag: 09:00 - 17:00
De knop die eruitziet als disabled maar het niet is
Een grijze knop. Lichte tekst. Ziet eruit als uitgeschakeld. Maar klik erop. Hij doet iets. Hij is niet disabled. Hij ziet er alleen zo uit.
Verborgen menu dat toch wordt voorgelezen
Je mobiele menu is dicht. Ingeklapt. Onzichtbaar. Maar een schermlezer leest alle vijf de menulinks voor. Home. Over ons. Diensten. Projecten. Contact. Alsof het menu gewoon open is.
Heading in een summary: zelfde probleem
Net als bij een button: een <summary> heeft de impliciete rol van een button. En een button eet de rollen van zijn kinderen op.
Linktekst verborgen met display: none
De developer wilde het netjes doen. Een link met een aria-tekst voor schermlezers. Maar in plaats van sr-only gebruikte die display: none.
Focus gaat niet naar de foutmelding na het versturen
Je vult een formulier in. Twee velden vergeten. Je drukt op Versturen.
Custom videospeler met onbereikbare knoppen
Een video op je website. Eigen vormgeving. Play-knop, volume, voortgangsbalk, fullscreen.