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.
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.”
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.
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.
Cookiebanner die pas na 30 tabs bereikbaar is
Een cookiebanner onderaan het scherm. “Wij gebruiken cookies.” Twee knoppen: Accepteren en Weigeren.
aria-hidden: wat het doet en wanneer je het wel of niet gebruikt
Je controleert een pagina met WCAG Radar en zet de optie “Verborgen elementen” aan. Er lichten een paar plekken op. Bij elk daarvan staat: aria-hidden.
Single-page app die de titel niet bijwerkt
Je navigeert van de homepage naar de contactpagina. De content verandert. De URL verandert. Het tabblad? Staat nog steeds “Home - Webshop.”
Hover-content zonder focus-equivalent
Hover over het producticoon. Een popup verschijnt met specificaties, prijs en een “Bekijk product”-link.
Grafiekbalken die in elkaar overlopen
Een staafgrafiek. Twee categorien. Lichtblauw (#90CAF9) en lichtgroen (#A5D6A7). Naast elkaar.
Navigatiemenu verdwijnt bij inzoomen
Home. Over ons. Diensten. Projecten. Contact. Vijf links op een rij. Op een breed scherm prima. Bij 400% zoom? Dan past “Contact” niet meer. Die link valt buiten het scherm. Zonder scrollbar. Zonder hamburgermenu.