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.
Foutmelding en zoekresultaat ontbreken in de titel
Je vult een formulier in. Twee velden fout. Je drukt op Versturen. De pagina herlaadt.
Wat is een toegankelijke naam?
Zet een schermlezer aan en beweeg naar een knop. Je hoort twee of drie dingen: “Voeg toe aan winkelmand, knop”. Het woord “knop” is de rol. “Voeg toe aan winkelmand” is de toegankelijke naam.
Carrousel die alleen met klikken werkt
Pijltje links. Pijltje rechts. Klikken om door de slides te bladeren.
Markeringen op screenshots die onzichtbaar zijn
Een screenshot in je documentatie. Met een rode cirkel om het knopje dat je moet klikken.
Vaste elementen die het scherm overnemen
Je opent een webpagina en zoomt in tot 400%. Onderaan: een cookiemelding. Die is nu niet meer een bescheiden balkje — het neemt de helft van je scherm in beslag.
Dark mode met nieuwe contrastproblemen
Je website heeft dark mode. Modern. Gebruiksvriendelijk. Populair. En vol contrastproblemen die er in de lichte versie niet waren.
Focusrand die alleen door kleur werkt
Je navigeert met het toetsenbord. Een knop krijgt focus. De focusrand is lichtblauw (#99CCFF) op een witte achtergrond.
Grafiek die onbegrijpelijk wordt voorgelezen
Een mooie staafgrafiek. Omzet per kwartaal. Vier balken. Duidelijke labels.
Voortgangsbalken
Stap 2 van 4. Je ziet een balkje dat voor twee derde is gevuld. Je weet waar je bent in het proces.
aria-label op een div: wordt genegeerd
Een developer wil een sectie een naam geven voor schermlezers. Plakt aria-label="Zoekresultaten" op een <div>.
Zichtbaar "Submit", aria-label "Verzenden"
Een Nederlandstalige website. Een knop. Op het scherm staat “Submit.” Het aria-label zegt “Verzenden.”
Link naar een PDF zonder het te zeggen
“Algemene voorwaarden.” Je klikt. En ineens opent er een PDF in je browser. Of er start een download. Of je telefoon opent een PDF-viewer.