Focus zichtbaar
Alle interactieve elementen moeten een zichtbare focusindicator hebben bij toetsenbordnavigatie. Faalt op 68% van de homepagina's. Gebruik :focus-visible voor indicatoren die alleen bij toetsenbordgebruik verschijnen.
When you move around with the keyboard, a clear outline must show where you are — like a cursor for the Tab key.
WCAG 2.4.7 (Niveau AA) vereist een zichtbare focusindicator. WCAG 2.4.13 Focus Appearance (Niveau AAA, nieuw in 2.2) gaat verder: de indicator moet minimaal 2px dik zijn rondom de omtrek met 3:1 contrast tussen gefocuste en ongefocuste staten.
De CSS pseudo-class :focus-visible is de moderne oplossing — het toont focusringen bij toetsenbordnavigatie maar verbergt ze bij muisklikken, waardoor zowel ontwerpers als toegankelijkheidsvereisten tevreden zijn.
Waarom dit belangrijk is
Focuszichtbaarheid faalt op 68% van de homepagina's. Toetsenbordgebruikers moeten zien waar ze zijn — het verwijderen van outline:none zonder vervanging maakt de pagina als navigeren in het donker. Dit is vooral kritiek voor gebruikers met motorische beperkingen die niet simpelweg kunnen klikken waar ze willen.
Hoe te detecteren
Tab door de pagina. Kun je een duidelijke focusindicator zien op elk interactief element? Controleer aangepaste componenten, links op donkere achtergronden, en elementen waar de standaard outline is verwijderd.
Hoe op te lossen
/* Never do this without a replacement */
*:focus { outline: none; } /* ✗ */
/* Use :focus-visible for keyboard-only indicators */
:focus-visible {
outline: 2px solid #18181b;
outline-offset: 2px;
}
/* For dark backgrounds, use a light ring */
.dark-section :focus-visible {
outline-color: #fafafa;
}
/* Minimum for WCAG 2.4.13 (AAA) */
:focus-visible {
outline: 2px solid currentColor; /* ≥3:1 contrast */
outline-offset: 2px; /* ≥2px perimeter */
}