Focus visible
F
Definition complete
Le focus visible est l'indicateur visuel (outline, bordure, surlignage) qui signale l'element interactif actuellement selectionne lors de la navigation au clavier. Appuyer sur Tab deplace le focus d'un element focusable au suivant, et l'indicateur visuel montre ou se trouve le curseur.
Le focus visible est une exigence fondamentale d'accessibilite (WCAG 2.4.7) : sans lui, les utilisateurs naviguant au clavier (handicaps moteurs, malvoyants utilisant un lecteur d'ecran, power users) ne peuvent pas savoir quel element est actif et serait actionne en appuyant sur Entree.
Le style par defaut des navigateurs (outline bleu ou noir) est souvent juge inesthetique et supprime par les designers avec outline: none. Cette pratique est problematique pour l'accessibilite. La solution : personnaliser le focus avec :focus-visible (qui ne s'applique qu'a la navigation clavier, pas aux clics souris) plutot que de le supprimer.
Les bonnes pratiques : utiliser :focus-visible plutot que :focus pour eviter l'outline au clic souris, creer un style de focus coherent avec la charte graphique, tester la navigation Tab sur toutes les pages, et s'assurer que tous les elements interactifs sont focusables dans un ordre logique.
Exemples pratiques
- Style personnalise : button:focus-visible { outline: 3px solid #0066CC; outline-offset: 2px; } - Outline bleu visible sans apparaitre au clic.
- Skip link : Un lien "Aller au contenu principal" apparait au premier Tab, permettant de sauter la navigation pour les utilisateurs clavier.
- Test d'accessibilite : Naviguer sur le site uniquement au clavier pour verifier que le focus est toujours visible et suit un ordre logique.
A quoi sert Focus visible ?
Le focus visible est obligatoire pour la conformite WCAG et l'accessibilite web. Il beneficie aux utilisateurs de clavier, aux personnes avec handicaps moteurs, et a tous les power users preferant le clavier a la souris.
Focus visible en pratique chez 123web
Chez 123web, nous ne supprimons jamais le focus sans le remplacer par un style alternatif accessible. Nous utilisons :focus-visible pour un design propre qui reste utilisable au clavier, et testons systematiquement la navigation Tab sur chaque projet.