Survol et focus

Les pseudo-classes visent un élément dans un certain état :

a:hover {                       /* pendant que la souris le survole */
    color: #0b4f6c;
    text-decoration: underline;
}

a:focus-visible {               /* sélectionné au clavier (touche Tab) */
    outline: 2px solid #0b4f6c;
}

Le focus, pour ceux qui n'ont pas de souris

Beaucoup de personnes naviguent au clavier : touche Tab pour passer d'un lien à l'autre, Entrée pour l'activer. Le contour (outline) montre où elles se trouvent. Le supprimer (outline: none) parce qu'il « fait moche » rend la page inutilisable pour elles.

:focus-visible résout le dilemme : le navigateur n'affiche le style qu'aux personnes qui naviguent au clavier, pas après un clic. On peut alors soigner ce contour plutôt que l'effacer.

Le survol ne suffit pas

Sur un téléphone, il n'y a pas de survol. Une information qui n'apparaît **qu'**au survol est invisible pour une partie des visiteurs : le survol accompagne, il ne remplace pas.