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.

Dit is het digitale equivalent van iemand een stoel aanbieden en die dan wegtrekken.

Waarom doet iemand dit?

Meestal om de “lelijke” focusindicator te voorkomen bij muisinteractie. De developer wil niet dat een knop een blauwe rand krijgt na het klikken. De oplossing: focus verwijderen na elke klik.

Het bijeffect: toetsenbordgebruikers kunnen het element niet meer gebruiken. De focus wordt direct verwijderd zodra die arriveert.

De juiste oplossing voor “focus na klik”:

/* :focus-visible toont de indicator alleen bij toetsenbordnavigatie */
button:focus-visible {
  outline: 2px solid #0066CC;
  outline-offset: 2px;
}

/* Geen outline bij muisklik */
button:focus:not(:focus-visible) {
  outline: none;
}