Wcag uitgelegd
Focusindicator die opgaat in de achtergrond
Focusindicator die opgaat in de achtergrond — WCAG 2.4.7 Focus zichtbaar (post 2/7)
Er is een focusindicator. Technisch gezien. Een lichtgrijze outline (#E0E0E0) op een witte achtergrond. 1 pixel dik.
Contrast: 1,4:1. Je moet er met je neus tegenaan zitten om het te zien.
De browser toont standaard een duidelijke focus. Maar de designer wilde iets “subtielers.” Het resultaat: een indicator die er is maar onzichtbaar is.
/* Niet doen: te subtiel */
button:focus-visible {
outline: 1px solid #E0E0E0;
}
/* Wel doen: duidelijk zichtbaar */
button:focus-visible {
outline: 2px solid #0066CC;
outline-offset: 2px;
}
Twee factoren bepalen de zichtbaarheid
- Kleur: voldoende contrast met de achtergrond (minimaal 3:1)
- Dikte: minimaal 2px (1px is op veel schermen nauwelijks zichtbaar)
Let op: test op alle achtergrondkleuren die op je website voorkomen. Een donkerblauwe focus op wit is perfect. Op een donkerblauwe footer? Onzichtbaar.
Dubbele ring als universele oplossing
button:focus-visible {
outline: 2px solid #0066CC;
outline-offset: 2px;
box-shadow: 0 0 0 4px #FFFFFF;
}
Donkere ring op lichte achtergrond. Witte schaduw op donkere achtergrond. Altijd zichtbaar.
Meer over richtlijn 2.4
outline: none — de meest destructieve regel in CSS
*:focus { outline: none; } Eén regel. En elke toetsenbordgebruiker op je website navigeert blind.
Focus springt onverwacht door de pagina
Tab. Je bent in het hoofdmenu. Tab. Je bent in de sidebar. Tab. Je bent terug in het hoofdmenu. Tab. Nu ben je in de content.
Paginatitel ontbreekt
Je opent een pagina. De schermlezer zegt: “https colon slash slash w-w-w dot example dot com slash pagina dash 3-b dot html.”
Related Posts
SC 2.4.7 - Wat betekent \"Focus zichtbaar\"
Stel je voor dat je een formulier invult met je muis, maar de cursor is onzichtbaar. Je klikt ergens en hoopt dat je het juiste veld raakt. Dat klinkt absurd, maar precies dat is wat er gebeurt als een website geen zichtbare focus-indicator heeft voor toetsenbordgebruikers.
Wat kost een toegankelijkheidsaudit? Prijzen, pakketten en waar je op moet letten
De korte versie “Wat kost zo’n audit eigenlijk?” Het is de vraag die ik het vaakst krijg — en die bijna geen enkel bureau beantwoordt op de website.
Rijksmuseum-apps getest op toegankelijkheid: onze leukste opdracht van 2025
Speurtocht door het museum De meeste audits die we doen gaan over websites. Af en toe komt er iets voorbij dat echt anders is. In december 2025 was dat het geval: we mochten de iOS- en Android-app van het Rijksmuseum testen op toegankelijkheid. Het was de leukste opdracht van 2025.