Naar de inhoud
Afrekenbaar

Kennisbank

De focus moet zichtbaar zijn, anders tab je blind

Wie met het toetsenbord werkt, ziet alleen aan een randje waar hij is. Haal je dat randje weg, dan is je shop een blind doolhof.

Drie knoppen waarvan er één een zichtbare focusrand heeft Een rij knoppen; de middelste heeft een duidelijke rand omdat de focus daar staat. Daaronder een Tab-toets.
Wie met het toetsenbord werkt, ziet alleen aan de rand waar hij is. Verdwijnt die rand, dan tab je blind. Onze eigen site zet er een rand van drie pixels omheen.

Wat we vinden

Dit is de stilste van onze bevindingen en tegelijk een van de meest voorkomende: bij 58 van de 70 gemeten webshops was er minstens één pagina waarop een knop of link geen enkel zichtbaar verschil liet zien toen de focus erop stond. We meten dat door met Tab door de pagina te lopen en bij elke stap de stijl mét en zonder focus te vergelijken.

Waar het vandaan komt

Bijna altijd uit één regel die ooit in de stylesheet is gezet om de "lelijke blauwe rand" van de browser weg te halen:

*:focus { outline: none; }

Dat is de standaardoplossing van tien jaar geleden. Wil je die rand niet, geef dan je eigen rand terug:

:focus-visible {
  outline: 3px solid #b93f0c;
  outline-offset: 3px;
}

:focus-visible is het verschil met vroeger: de rand verschijnt bij toetsenbord- gebruik, niet bij een muisklik. Je hebt dus geen reden meer om hem helemaal weg te halen.

Waar het extra vaak misgaat

  • Knoppen met een eigen ontwerp. Een div die als knop dienst doet, krijgt van de browser niets vanzelf.
  • Links in een donkere balk. De standaardrand is daar onzichtbaar. Geef hem een lichte kleur op donkere achtergronden.
  • Elementen met overflow:hidden. De rand valt buiten het vak en wordt afgeknipt. outline-offset naar binnen halen lost het op.

Hoe dik en hoe zichtbaar?

WCAG 2.1 vraagt alleen dát hij zichtbaar is (2.4.7). WCAG 2.2 maakt het concreter met een criterium over het uiterlijk van de focusrand en met de eis dat de focus niet mag worden afgedekt door bijvoorbeeld een plakkende balk. Drie pixels met wat ruimte eromheen is een veilige keuze; zo staat het ook op deze site.

Zo controleer je het

Leg je muis weg. Druk tien keer op Tab en kijk of je elke keer kunt aanwijzen waar je bent. Moet je zoeken, dan is het niet zichtbaar genoeg.

Bronnen

  • Eigen meting bij 70 Nederlandse webshops, 14 september 2026: bij 58 shops minstens één pagina zonder zichtbaar focusverschil
  • WCAG 2.1, succescriterium 2.4.7 Focus zichtbaar; WCAG 2.2, 2.4.11 Focus niet afgedekt en 2.4.13 Focusweergave

Verder lezen

Gratis check van je homepage Meer uitleg