Een link met een donkere achtergrond. De focusindicator is er, een zwarte outline van 2 pixels. Maar outline-offset: -4px duwt die outline naar binnen. Onder de achtergrondkleur.
De indicator verdwijnt achter het element. Technisch aanwezig. Visueel onzichtbaar.
/* Niet doen: outline verdwijnt onder de achtergrond */
a:focus-visible {
outline: 2px solid black;
outline-offset: -4px;
background-color: black;
color: white;
}
/* Wel doen: outline buiten het element */
a:focus-visible {
outline: 2px solid black;
outline-offset: 2px;
}
Wanneer is een negatieve offset verleidelijk?
Als de designer de focus “strakker” wil, dichter bij het element, of binnen de border. Maar een negatieve offset op een element met een achtergrondkleur is een recept voor onzichtbaarheid.
De vuistregel: gebruik altijd een positieve outline-offset (2px is een goede standaard). De outline staat dan buiten het element en wordt nooit bedekt door de achtergrond.
