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.

outline: none, de meest destructieve regel in CSS

outline: none, de meest destructieve regel in CSS

*:focus { outline: none; } Eén regel. En elke toetsenbordgebruiker op je website navigeert blind.

"Lees meer"

"Lees meer"

Lees meer. Lees meer. Lees meer. Lees meer. Lees meer.

Decoratieve afbeeldingen

Decoratieve afbeeldingen

Ik kom het regelmatig tegen in audits: een decoratieve scheidingslijn, leuke bolletjes, of een achtergrondpatroon, en ze hebben allemaal een beschrijving. “Afbeelding, blauwe cirkel.” “Afbeelding, golvend lijntje.” Iemand die voorleessoftware gebruikt, hoort al die rommel tussendoor terwijl die gewoon door je webshop wil scrollen. Stel je voor dat je in een fysieke winkel loopt en bij elke stap iemand in je oor fluistert: “Tegel. Tegel. Nog een tegel.”

Focus springt onverwacht door de pagina

Focus springt onverwacht door de pagina

Tab. Je bent in het hoofdmenu. Tab. Je bent in de sidebar. Tab. Je bent terug in het hoofdmenu. Tab. Nu ben je in de content.

Paginatitel ontbreekt

Paginatitel ontbreekt

Je opent een pagina. De schermlezer zegt: “https colon slash slash w-w-w dot example dot com slash pagina dash 3-b dot html.”

Klikbare div in plaats van een button

Klikbare div in plaats van een button

Een div met een onclick. Ziet eruit als een knop. Doet iets als je erop klikt.

Informatief icoon dat onzichtbaar is

Informatief icoon dat onzichtbaar is

Drie streepjes. Een hamburgericoon. Dat is je menu. Tenminste, als je het kunt zien.

Elementen met een vaste breedte

Elementen met een vaste breedte

Je zoomt in tot 400%. De tekst wordt groter, de pagina smaller.

Lichtgrijze tekst op een witte achtergrond

Lichtgrijze tekst op een witte achtergrond

Contrastverhouding: 2,85:1. Vereist: 4,5:1. Dit is de meest voorkomende contrastfout op het web. En ik snap waarom. Het ziet er strak uit. Rustig. Modern.

Links die alleen door kleur herkenbaar zijn

Links die alleen door kleur herkenbaar zijn

Een alinea tekst. Ergens staat een link. Blauw. Geen onderstreping.

Metadata boven de kop van een artikel

Metadata boven de kop van een artikel

“15 maart 2026. Workshops.” Dat hoort een schermlezergebruiker. En dan: stilte. Want het volgende element is de kop van het artikel eronder.

JavaScript dat de focus actief verwijdert

JavaScript dat de focus actief verwijdert

element.addEventListener("focus", function() { this.blur(); }); Een element krijgt focus. JavaScript verwijdert de focus direct. Het element heeft een fractie van een seconde focus gehad. De gebruiker merkt niets.