Toetsenbord
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.
outline: none, de meest destructieve regel in CSS
*:focus { outline: none; } Eén regel. En elke toetsenbordgebruiker op je website navigeert blind.
SC 2.4.3 - Wat betekent “Focusvolgorde”
Mensen die met het toetsenbord of andere invoerapparaten navigeren, vertrouwen op een logische focusvolgorde om door een website te bewegen. De focusvolgorde bepaalt in welke volgorde interactieve elementen (zoals knoppen, links en formuliervelden) geselecteerd worden wanneer je de Tab-toets gebruikt. Als de volgorde niet logisch is, kunnen gebruikers verdwalen of belangrijke onderdelen missen.