CSS : Bien gérer le focus pour l’accessibilité

Quand on peaufine le design d’une interface web, il peut être tentant de supprimer les styles de focus par défaut. Pourtant, ce petit détail visuel joue un rôle clé en accessibilité. Nous allons voir pourquoi le outline est souvent retiré, en quoi cela peut poser problème pour les utilisateurs naviguant au clavier, et comment utiliser intelligemment :focus-visible pour allier esthétique et accessibilité.

1. Pourquoi enlève-t-on le outline sur :focus ?

Lorsqu’un élément HTML reçoit le focus (comme un lien ou un champ de formulaire), les navigateurs affichent par défaut un contour (souvent bleu) autour de l’élément. Ce outline est très utile pour les utilisateurs naviguant au clavier, car il leur permet de voir où se trouve le focus.

Cependant, ce style par défaut est souvent jugé peu esthétique. Beaucoup de développeurs le retirent avec une règle comme celle-ci

:focus {
    outline: none;
}

Cela permet d’avoir un rendu visuel plus propre ou mieux intégré au design, notamment après un clic de souris. Mais cela introduit un problème majeur d’accessibilité…

2. Pourquoi c’est problématique et comment bien faire

Supprimer le outline sans alternative rend la navigation clavier extrêmement difficile, voire impossible. Les utilisateurs ne peuvent plus savoir où ils se trouvent dans l’interface, ce qui nuit gravement à l’accessibilité.

Pour résoudre ce conflit entre design et accessibilité, on peut utiliser la pseudo-classe :focus-visible. Elle cible uniquement les situations où le focus est visible et pertinent, c’est-à-dire lors de l’utilisation du clavier ou de technologies d’assistance. Voici une approche plus inclusive :

/**
 * Supprime le contour de focus par défaut sur tous les éléments.
 */

:focus {
	outline: none;
}

/**
 * Affiche un contour de focus visible uniquement pour les utilisateurs 
   au clavier ou avec technologies d’assistance.
 * Améliore l’accessibilité sans affecter les interactions à la souris 
   ou au toucher.
 */

:focus-visible {
	outline: 2px solid #0e93f0;
	outline-offset: 2px;
}

✅ Ce que ça change :

• Le contour est supprimé pour les clics souris, ce qui évite un effet visuel parfois gênant.
• Le contour reste visible pour les utilisateurs clavier, assurant une navigation accessible.
• Le style peut être personnalisé (couleur, épaisseur, décalage) pour s’intégrer parfaitement au design.

🧠 À retenir :

Ne jamais supprimer complètement les styles de focus sans prévoir une alternative. Grâce à :focus-visible, on peut concilier esthétique et accessibilité sans compromis.