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

Astuceaccessibilité

Publié par le , mis à jour le (11596 lectures)

contour clic outline focus tabulation

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

illustration de :focus-visible lors d'un clic et d'une navigation clavier (tabulation)

Commentaires

J'ai commencé à le déployer récemment sur les apps Proton (en douceur), c'est assez génial à utiliser, notamment via @supports selector(:focus-visible) ou comme spécifié dans ce billet.

Attention, y a quelques surprises sur certains éléments (logiques quand on y réfléchit, mais ça peut prendre à rebrousse-poil), genre un clic sur un input activera automatiquement :focus-visible (vu que l'élément est actionnable de facto au clavier), etc. C'est pas gênant, mais ça peut être surprenant parfois.

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.