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.
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
Een alinea tekst. Ergens staat een link. Blauw. Geen onderstreping.
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
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.
Productafbeelding zonder beschrijving
Ik moest een keer nieuwe golfschoenen kopen. De volgende dag zou ik gaan golfen en ik moest voor 16:00 bestellen om ze op tijd te krijgen. Die hele dag zat ik in de auto. En ik heb een stoornis: maximaal drie kleuren in mijn outfit. De schoenen moesten wit zijn met rode elementen. Probeer dat eens in de file te vinden op je telefoon. Ik kon alleen maar luisteren naar wat de voorleessoftware me vertelde. Maar bij de meeste webshops was er niks te horen: geen kleur, geen materiaal, geen details. En toen was ik weg als klant.
Kopniveaus
Stel je voor: je opent een boek en de inhoudsopgave gaat van hoofdstuk 1 direct naar paragraaf 3.2.
overflow: hidden knipt de focusindicator af
Een mooie kaartcomponent. Afgeronde hoeken. overflow: hidden om te voorkomen dat content buiten de hoeken valt.
Negatieve outline-offset die de focus verbergt
Een link met een donkere achtergrond. De focusindicator is er, een zwarte outline van 2 pixels. Maar outline-offset: -4px duwt die outline naar binnen. Onder de achtergrondkleur.
Focusindicator die opgaat in de achtergrond
Er is een focusindicator. Technisch gezien. Een lichtgrijze outline (#E0E0E0) op een witte achtergrond. 1 pixel dik.
outline: none, de meest destructieve regel in CSS
*:focus { outline: none; } Eén regel. En elke toetsenbordgebruiker op je website navigeert blind.
Zijn je formulieren goed zichtbaar?(WCAG 1.4.11)
Non-text Contrast: waarom je formuliervelden, knoppen en iconen onzichtbaar zijn voor slechtzienden (WCAG 1.4.11) Je staat met je telefoon in de felle zon voor een museum. Je wilt tickets kopen, maar het formulier op de website is nauwelijks zichtbaar. Invoervelden met lichtgrijze randjes, knoppen die opgaan in de achtergrond: je tuurt, draait je scherm, houdt je hand erboven. Uiteindelijk geef je het op en sluit je aan bij de rij voor de kassa.
Text Spacing: waarom vaste hoogtes je code breken (WCAG 1.4.12)
Text Spacing: waarom je tekst nooit mag vastzetten in een vaste hoogte (WCAG 1.4.12) Je hebt net die perfecte hero-sectie gebouwd. Exacte hoogte van 400px, tekst keurig gecentreerd, pixel-perfect zoals in het ontwerp. Merkte je dat het laatste woord van de titel ineens is verdwenen? Welkom bij WCAG succescriterium 1.4.12.