Toetsenbordgebruikers raken de weg kwijt: maak je focus zichtbaar

Wie met de Tab-toets door je site gaat, ziet normaal een rand om de link of knop waar hij is. Veel sites halen die rand weg met outline: none, omdat hij er "lelijk" uitziet. Dan navigeren toetsenbordgebruikers blind.

In het kud-rapport Toetsenbordgebruikers raken de weg kwijt

Waarom het uitmaakt

Mensen met een motorische beperking, power users en iedereen met een kapotte muis gebruiken het toetsenbord. Zonder zichtbare focus weten ze niet waar ze zijn.

Het is een harde eis in de toegankelijkheidsrichtlijnen (WCAG 2.4.7, focus zichtbaar).

Zo los je het op

Zoek in je CSS naar outline: none of outline: 0 en haal het weg, of vervang het.
Gebruik :focus-visible. Die stijl verschijnt alleen bij toetsenbordgebruik, niet als je met de muis klikt. Zo heb je het beste van twee werelden.
Maak de focus duidelijk: een rand van 2 tot 3 pixels in een kleur met goed contrast, bijvoorbeeld je merkkleur.
Test het zelf: druk op Tab en loop je hele pagina door.

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

Op jouw platform

WordPress en Shopify: De outline wordt vaak weggehaald in het thema of in een "reset"-stylesheet. Voeg de stijl hierboven toe aan je eigen CSS, bijvoorbeeld via Extra CSS in de Customizer.

Veelgestelde vragen

Waarom zie ik die rand als ik met mijn muis klik?

Bij sommige oudere CSS is dat zo. Met :focus-visible toont de browser de rand alleen als het nuttig is, meestal bij toetsenbordgebruik.

Mag de focusstijl iets anders zijn dan een rand?

Ja, bijvoorbeeld een achtergrondkleur of onderstreping, zolang het duidelijk zichtbaar is en genoeg contrast heeft.