Le coup de pouce accessibilité de CSS :focus-visible

Les éléments interactifs d'un document web (liens, champs et boutons en général) affichent un contour de couleur lorsqu'ils réagissent à l'événement :focus, c'est à dire au clic, au touch et à la navigation clavier (via la touche Tab par exemple).

Contre toute attente, ce contour n'est ni une bordure (border) ni une ombre portée (box-shadow), mais correspond à la propriété CSS outline.

Oui mais... "c'est moche"

L'ensemble des navigateurs appliquent par défaut un outline visible lors de l'événement :focus, et ce mécanisme a été conçu pour rendre ces éléments accessibles à tous, afin de se repérer lors d'une navigation au clavier.

Durant de nombreuses années nous étions tiraillés entre :

• Les têtes grimaçantes de nos clients (et graphistes) souhaitant supprimer ce contour "disgracieux" autour des éléments cliquables.
• La volonté de conserver ces éléments accessibles à tout le monde en évitant à tout prix le désastreux outline: none et tentant de convaincre nos clients (et graphistes) du bienfait de ce contour.

Complément d'information : l'indicateur visuel de focus bénéficie aux personnes ayant des troubles de la vision ou cognitifs.

:focus-visible pour contenter tout le monde

Le sélecteur focus-visible est un ajout relativement récent aux brouillons de spécifications CSS, mais qui n'en demeure pas moins compatible sur la majorité des navigateurs modernes.

Grâce à la pseudo-classe :focus-visible il est dorénavant possible de masquer le contour (focus) uniquement lors du clic ou d'un touch et tout en le préservant lors d'un focus au clavier.

• .element:focus : sélecteur actif au clic, touch et navigation clavier
• .element:focus-visible : sélecteur actif uniquement lors de la navigation clavier
• .element:focus:not(:focus-visible) : sélecteur actif uniquement lors du clic et touch

L'exemple de code CSS ci-dessous permet de distinguer les types de contours selon les interactions possibles.

Notez que les anciens navigateurs (Internet Explorer) qui ne reconnaissent pas :focus-visible se contenteront d'afficher leur :focus naturel :

@supports selector(div:focus-visible) {
  /* uniquement au clic/tap focus */
  .custom-button:focus:not(:focus-visible) {
    outline-color: transparent;
  }
  /* uniquement au focus clavier */
  .custom-button:focus-visible {
    outline: 6px dashed hotpink;
  }
}

Voir et tester en ligne