SC 2.4.7 Niveau AA WCAG 2.0

Focus zichtbaar

Elke toetsenbordbestuurbare interface moet een zichtbare focusindicator hebben op het element dat momenteel focus heeft. Wie niet kan zien waar de toetsenbordfocus is, kan de site niet per toetsenbord gebruiken. Een van de meest aangehaalde succescriteria in audits.

Wat het vereist

Wanneer een interactief element toetsenbordfocus krijgt, moet de browser — of de CSS van de pagina — een zichtbare indicator weergeven die aanduidt welk element gefocust is. Het succescriterium schrijft niet voor hoe die indicator eruitziet; dat is de taak van 2.4.13 op AAA-niveau. Het vereist alleen dat iets zichtbaar is. De klassieke fout is *:focus { outline: none; } zonder vervanging.

Dit succescriterium geldt voor alles wat focus kan ontvangen: links, knoppen, formulierinvoer, aangepaste widgets, iframes en alles met tabindex. Het geldt ongeacht of de gebruiker via Tab, Shift+Tab of een programmatische focusoproep is aangekomen.

Hoe hieraan te voldoen

Schrijf nooit outline: none (of outline: 0) zonder directe vervanging. Gebruik :focus-visible om de aangepaste ring te beperken tot toetsenbordgebruikers als men de indicator bij muisklik wil onderdrukken.
Bied een focusstijl met voldoende contrast en dikte om duidelijk zichtbaar te zijn: een 2px solide rand met 3:1 contrast ten opzichte van de aangrenzende achtergrond is de conservatieve basislijn.
Gebruik voor lichte besturingselementen op een lichte achtergrond een donkere rand (of andersom). Een grijze rand op een grijze hover-toestand is de klassieke onzichtbaarheidsval.
Aangepaste widgets (combobox, listbox, menu) moeten focus verplaatsen naar de actieve optie en daar een zichtbare indicator weergeven.
Test door de volledige pagina via Tab te doorlopen vanuit de URL-balk. Elk stopelement moet duidelijk zichtbaar zijn zonder turen.

Veelvoorkomende fouten

Globale reset: *:focus { outline: none; } in de basis-CSS, nooit opnieuw toegevoegd.
Componentbibliotheken die worden geleverd met een 1px laagcontrastrand die overeenkomt met de merkkleur op een hero-verloop — in de praktijk onzichtbaar.
Focusindicator verborgen achter een plakkerige koptekst bij scrollen (zie 2.4.11 — zelfde oorzaak, ander succescriterium).
Knoppen die achtergrondkleur wijzigen bij :hover maar niet bij :focus, zodat toetsenbordgebruikers geen enkel signaal krijgen.
Aangepaste dropdowns waarbij focus verplaatst naar een verborgen offscreen <li> en er visueel niets verandert.
Ontwerpers die de rand vervangen door een kleine schaduw die onzichtbaar is op drukke achtergronden.

Hoe `:focus-visible` past in het geheel

Browsers bieden :focus-visible om toetsenbordfocus te onderscheiden van muisfocus. Patroon:

:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Dit houdt muisklikken schoon en geeft toetsenbordgebruikers een indicator. Veilig in alle moderne browsers per 2026.

Waarom het ertoe doet

Focus zichtbaar is het meest aangehaalde succescriterium in toetsenbordtoegankelijkheidsaudits — en waarschijnlijk het grootste effect. Een site die niet voldoet aan 2.4.7 is onbruikbaar per toetsenbord, zelfs als elk ander succescriterium slaagt. Gebruikers met motorische beperkingen, slechtziende gebruikers die vergroters gebruiken en gebruikers met handblessures verliezen allemaal toegang. Mobiele toetsenbordgebruikers (externe Bluetooth-toetsenborden op tablets) stuiten op hetzelfde probleem. Het oplossen ervan is doorgaans één CSS-regel, wat het voortduren van deze fout op het web des te opmerkelijker maakt.