Op zestig pagina’s van mijn eigen ontwerpset stond een focusring die je niet kon zien. Niet weggehaald: hij stond er, in de code, op elke knop. Je zag hem alleen niet.
Wat er stond
De regel was outline: 3px solid currentColor. Dat klinkt verstandig: de ring krijgt de kleur van de tekst, dus hij past altijd. Op een donkergroene knop is de tekst wit, dus de ring is wit. En die witte ring lag op een crèmekleurige pagina. Wit op crème is 1,12 : 1. De eis is 3 : 1. In de praktijk: geen focusring.
Dit is precies het soort fout dat een scanner niet vindt. De outline is er, hij heeft een dikte en een kleur, en tegen de knop zelf haalt hij misschien wel contrast. Wat een scanner niet doet, is kijken tegen wat de ring werkelijk ligt: de pagina eromheen.
Hoe ik het mat
Met een eigen meting die elk element focus geeft en dan de berekende kleur van de ring vergelijkt met de berekende kleur van de ondergrond, over alle pagina’s van de set. Eén keer schrijven, zestig keer draaien. En met een zelftest: eerst een regel van 1,9 : 1 inbouwen, kijken of de meting hem meldt, en dan pas de nulmeting geloven.
De regel die het oplost
Twee ringen om elkaar: een donkere binnenring en een lichte buitenring. Welke kleur er ook onder ligt, één van de twee haalt zijn contrast.
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid #10151A;
outline-offset: 2px;
box-shadow: 0 0 0 6px #FFFFFF;
}Probeer het
Druk op Tab en loop door de links hieronder, op het lichte vel en op het donkere vlak.
Drie echte links. Let op de ring: donker van binnen, licht van buiten.
Naar het archiefNaar het bewijsBel me terug
En dezelfde ring op een donker vlak, want dáár ging het mis:
Wat je zelf kunt doen
Open je eigen site, druk op Tab, en kijk of je ziet waar je bent. Doe het ook op een knop met een donkere achtergrond. Zie je niets, dan is dit de regel. Zie je wél iets maar zwak: meet het, tegen de pagina en niet tegen de knop.
Geen scanner heeft dit gevonden. De meting die het wél vond draait bij elke ronde opnieuw.