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.
Wanneer u met het toetsenbord navigeert, moet er een duidelijke markering zichtbaar zijn die aangeeft waar u zich bevindt — net als een cursor bij de Tab-toets.
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 */
}