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.
"Klik op Zoeken." Niets gebeurt.
Je gebruikt spraakbesturing. Je ziet een knop met “Zoeken” erop. Je zegt: “Klik op Zoeken.”
Knop zonder naam
Je hebt op je website een zoekveld met een knop. Op een desktop staat er “Zoeken” naast het vergrootglas-icoon. Prima, dat werkt. Maar wat gebeurt er als je inzoomt of de pagina op een telefoon bekijkt? De tekst “Zoeken” verdwijnt en alleen het icoon blijft over. En als dat icoon geen tekstalternatief heeft, dan weet iemand die voorleessoftware gebruikt niet wat die knop doet. Ze horen: “Knop.” Dat is alles. Geen “zoeken”, geen “versturen”, gewoon “knop.”
outline: none, de meest destructieve regel in CSS
*:focus { outline: none; } Eén regel. En elke toetsenbordgebruiker op je website navigeert blind.
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
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
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
Een div met een onclick. Ziet eruit als een knop. Doet iets als je erop klikt.
Informatief icoon dat onzichtbaar is
Drie streepjes. Een hamburgericoon. Dat is je menu. Tenminste, als je het kunt zien.
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.