outline: none — de meest destructieve regel in CSS

*:focus { outline: none; }

Eén regel. En elke toetsenbordgebruiker op je website navigeert blind.

Tab. Waar ben ik? Geen idee. Tab. Waar ben ik nu? Geen idee. Tab. Ik geef op.

Die ene CSS-regel verwijdert de focusindicator van elk interactief element. Links, knoppen, invoervelden — allemaal zonder zichtbare focus.

Waarom staat dit in zoveel codebases?

Omdat de standaard browser-outline “lelijk” is. Een blauwe of zwarte rand die niet bij het design past. En de eerste reflex van een developer is: weg ermee.

Maar de focusindicator is geen decoratie. Het is een navigatiehulpmiddel. Het equivalent van een muiscursor voor toetsenbordgebruikers.

De fix

/* Niet doen */
*:focus { outline: none; }

/* Wel doen: vervang door een mooiere variant */
*:focus-visible {
  outline: 2px solid #0066CC;
  outline-offset: 2px;
}

:focus-visible is de sleutel. Die toont de outline alleen bij toetsenbordnavigatie — niet bij muisklikken. Zo heb je het beste van beide werelden: geen “lelijke” outline bij klikken, wél een zichtbare focus bij tabben.