Toetsenbord
CAPTCHA die niet met het toetsenbord werkt
“Bewijs dat je geen robot bent.” Klik op alle afbeeldingen met een verkeerslicht. Sleep het puzzelstukje naar de juiste plek. Teken het patroon na.
Custom videospeler met onbereikbare knoppen
Een video op je website. Eigen vormgeving. Play-knop, volume, voortgangsbalk, fullscreen.
Infinite scroll zonder "laad meer"-knop
Je scrolt naar beneden. Meer producten laden. Je scrolt verder. Nog meer producten. Eindeloos.
Een toegankelijk WordPress-thema kiezen: waar let je op?
Ik was acht jaar WordPress-ontwikkelaar voordat ik overstapte naar toegankelijkheidsonderzoek. In de meer dan 900 audits die mijn team onder mijn begeleiding sinds 2019 heeft gedaan, zien we dat de meeste ontoegankelijke elementen al in het thema zitten. Dus in de code die je koopt, en niet in de content die je er als eigenaar later in hebt gezet.
Carrousel die alleen met klikken werkt
Pijltje links. Pijltje rechts. Klikken om door de slides te bladeren.
Hover-content zonder focus-equivalent
Hover over het producticoon. Een popup verschijnt met specificaties, prijs en een “Bekijk product”-link.
Custom dropdown die niet met toetsen werkt
Een prachtig gestylede dropdown. Hover erop: de opties verschijnen. Klik op een optie: geselecteerd.
Mouseover zonder focus-equivalent
Je hovert over een tekst. Een tooltip verschijnt. Handige extra informatie.
AI-test: Herkent AI een div die doet alsof het een knop is?
Een div die doet alsof het een knop is Een <div> met een onclick. Ziet eruit als een knop. Doet iets als je klikt. Maar druk op Tab en er gebeurt niets. Enter? Ook niets.
Klikbare div in plaats van een button
Een div met een onclick. Ziet eruit als een knop. Doet iets als je erop klikt.
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.