Indicateurs de focus dans la navigation : ce que les utilisateurs au clavier doivent voir

Un utilisateur navigue dans votre menu de navigation en appuyant sur Tab. Le navigateur déplace le focus vers le lien suivant. Mais il ne peut pas voir où il se trouve. L’indicateur de focus est un contour gris de 1 pixel sur fond blanc — invisible à moins de plisser les yeux. Il appuie sur Tab à nouveau. Toujours rien de visible. Il abandonne et quitte le site.

Vous venez de perdre un client qui essayait activement d’utiliser votre site.

Les indicateurs de focus sont la partie la plus sous-estimée de la navigation au clavier. La plupart des concepteurs les traitent comme une réflexion tardive ou les suppriment activement parce qu’ils « ont l’air moches ». Mais pour les utilisateurs au clavier — qu’ils soient aveugles, en situation de handicap moteur, ou simplement des utilisateurs efficaces — les indicateurs de focus sont le curseur. Sans eux, la navigation est impossible.

La bonne nouvelle : concevoir des indicateurs de focus efficaces n’est pas difficile. La mauvaise nouvelle : la plupart des sites de commerce électronique se trompent, et la WCAG 2.2 a relevé la barre encore plus haut.

Ce que la WCAG 2.2 exige vraiment

La WCAG 2.2, publiée en octobre 2023, a introduit un nouveau critère de niveau AA spécifiquement pour les indicateurs de focus : Critère de succès 2.4.11 Apparence du focus.

Les directives précédentes (2.4.7 Focus Visible de la WCAG 2.1) exigeaient seulement que le focus soit visible — tout indicateur visible était acceptable. Mais « visible » est subjectif. Un contour gris clair de 1 pixel sur blanc compte techniquement comme visible, même s’il est fonctionnellement inutile.

La WCAG 2.2 définit des exigences spécifiques :

Exigence de taille

L’indicateur de focus doit faire au moins 2 pixels CSS d’épaisseur pour tout le périmètre du composant en focus, ou avoir une surface équivalente.

Ce que cela signifie en pratique :

• Un contour solide de 2 pixels autour d’un bouton : acceptable
• Un contour de 1 pixel : inacceptable (sauf s’il couvre une zone plus grande)
• Un contour de 4 pixels d’un seul côté : inacceptable (ne couvre pas le périmètre)
• Une ligne épaisse sous un lien de 2 pixels de haut et au moins aussi large que le texte du lien : acceptable

Exigence de contraste

L’indicateur de focus doit avoir un rapport de contraste d’au moins 3:1 par rapport à :

1. L’état sans focus du composant
2. Les couleurs adjacentes (arrière-plan du composant)

C’est plus difficile qu’il n’y paraît. Si votre lien de navigation est du texte bleu foncé sur fond blanc, et votre indicateur de focus est un contour bleu clair, vous avez besoin de :

• Un rapport de contraste 3:1 entre le contour bleu clair et le fond blanc (couleur adjacente)
• Un rapport de contraste 3:1 entre le contour bleu clair et le texte bleu foncé (couleur du composant)

De nombreux concepteurs choisissent une couleur de marque pour le focus qui a l’air géniale mais échoue l’une de ces vérifications de contraste.

Le problème du contour par défaut du navigateur

La plupart des navigateurs fournissent un contour de focus par défaut — généralement une ligne pointillée ou solide fine. Chrome utilise un contour bleu de 2 pixels. Firefox utilise un contour pointillé. Safari utilise une lueur bleue.

Ces valeurs par défaut échouent la WCAG 2.2 dans de nombreux contextes :

Une recherche de WebAIM a trouvé que les styles de focus par défaut échouent les exigences de contraste sur environ 78 % des combinaisons de couleurs utilisées sur les sites réels.

C’est pourquoi les indicateurs de focus personnalisés sont importants. Vous ne pouvez pas compter sur les valeurs par défaut du navigateur.

À quoi ressemblent les bons indicateurs de focus

Les meilleurs indicateurs de focus équilibrent visibilité, cohérence de marque et accessibilité. Voici des modèles éprouvés provenant des meilleurs sites de commerce électronique.

Modèle 1 : Contour à haut contraste

Le modèle le plus courant est un contour solide avec un contraste fort :

a:focus,
button:focus {
  outline: 3px solid #0066CC; /* Bleu avec haut contraste */
  outline-offset: 2px;        /* Espace entre l'élément et le contour */
}

Cela fonctionne bien pour les liens de navigation, les boutons et les entrées de formulaire. Le décalage de 2 pixels empêche le contour de chevaucher les bords du texte ou des icônes, améliorant la lisibilité.

Exemple réel : Amazon utilise un contour orange de 3 pixels (#FF9900) avec un décalage de 2 pixels sur tous les éléments interactifs. L’orange obtient un contraste de 6.8:1 sur les fonds blancs et de 4.2:1 par rapport à leurs boutons bleu foncé.

Modèle 2 : Combinaison arrière-plan + contour

Pour une intégration visuelle plus serrée, combinez un changement de couleur d’arrière-plan avec un contour fin :

a:focus,
button:focus {
  background-color: #E6F2FF; /* Arrière-plan bleu clair */
  outline: 2px solid #0066CC; /* Contour bleu plus foncé */
  outline-offset: 0;
}

C’est particulièrement efficace pour les menus de navigation où vous voulez que le lien en focus se démarque du reste du menu.

Exemple réel : La navigation supérieure de Google utilise un arrière-plan gris clair (#F1F3F4) avec un contour noir de 2 pixels sur les éléments en focus. L’arrière-plan crée un état « sélectionné » clair, tandis que le contour fournit le contraste requis.

Modèle 3 : Soulignement pour les liens texte

Pour les liens texte en ligne dans le contenu, un soulignement épais est souvent plus clair qu’un contour :

a:focus {
  outline: none; /* Supprimer le contour par défaut */
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #0066CC;
  text-underline-offset: 4px;
}

Cela garde l’indicateur de focus proche du texte et évite l’apparence « boîte autour d’un mot » que créent les contours.

Exemple réel : La documentation de Shopify utilise un soulignement bleu de 3 pixels sur les liens en focus, positionné 4 pixels sous la ligne de base du texte.

Modèle 4 : Ombre pour les cartes interactives

Pour les mises en page basées sur des cartes (cartes de produits, boîtes de fonctionnalités), une ombre de boîte crée de la profondeur :

.product-card:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0066CC, 0 4px 12px rgba(0,0,0,0.15);
}

La première couche d’ombre (flou 0px, propagation 3px) agit comme l’indicateur de focus. La deuxième ajoute de la profondeur visuelle.

Exemple réel : Etsy utilise une ombre bleue de 3 pixels autour des cartes de produits en focus, combinée avec une légère ombre portée pour la profondeur.

L’astuce :focus-visible

Une plainte courante des concepteurs concernant les indicateurs de focus est qu’ils apparaissent quand les utilisateurs cliquent avec la souris, créant un contour « coincé » après le clic. Cela se produit parce que :focus se déclenche sur n’importe quel événement de focus — souris, clavier ou programmé.

La solution est la pseudo-classe :focus-visible, supportée dans tous les navigateurs modernes depuis 2022 :

/* Afficher l'indicateur de focus uniquement pour les utilisateurs au clavier */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: 2px;
}

/* Masquer le contour par défaut pour les utilisateurs à la souris */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

Cela affiche l’indicateur de focus quand les utilisateurs naviguent avec Tab, mais le masque quand ils cliquent avec la souris. Le meilleur des deux mondes.

Avertissement important : Certains utilisateurs en situation de handicap moteur utilisent à la fois le clavier et la souris — ils peuvent cliquer pour mettre en focus un élément, puis utiliser le clavier pour interagir. Ne supposez pas que :focus-visible signifie « utilisateur de lecteur d’écran uniquement ». Cela signifie « navigation au clavier en cours ».

Tester vos indicateurs de focus

Voici comment tester si vos indicateurs de focus respectent la WCAG 2.2 :

Étape 1 : Test manuel au clavier

Ouvrez votre site et appuyez sur Tab à plusieurs reprises. Demandez-vous :

• Puis-je toujours voir où se trouve le focus ?
• L’indicateur de focus fait-il au moins 2 pixels d’épaisseur ?
• Est-ce qu’il a l’air différent de l’état sans focus ?
• Puis-je le voir sur les arrière-plans clairs ? Les arrière-plans foncés ?
• Disparaît-il ou devient-il difficile à voir au survol ?

Si vous répondez « non » à l’une de ces questions, vous avez un problème d’indicateur de focus.

Étape 2 : Vérification du rapport de contraste

Utilisez un outil comme le vérificateur de contraste de WebAIM pour vérifier :

1. Indicateur de focus vs. arrière-plan : Mesurez le contraste entre la couleur de votre contour de focus et l’arrière-plan derrière l’élément. Doit être au moins 3:1.

2. Indicateur de focus vs. composant : Mesurez le contraste entre la couleur de votre contour de focus et la couleur principale du composant (couleur du texte pour les liens, couleur d’arrière-plan pour les boutons). Doit être au moins 3:1.

Si votre indicateur de focus est #0066CC (un bleu courant), vérifiez-le par rapport à :

• Arrière-plan blanc : 8.1:1 (acceptable)
• Arrière-plan gris clair (#F5F5F5) : 7.2:1 (acceptable)
• Arrière-plan bleu clair (#CCE5FF) : 2.2:1 (inacceptable)

Quand cela échoue, vous avez besoin d’une couleur de focus plus foncée ou plus claire selon le contexte.

Étape 3 : Audit automatisé

Exécutez ces outils pour détecter les problèmes courants d’indicateurs de focus :

• axe DevTools (extension de navigateur) : Signale les indicateurs de focus manquants et les contours à contraste faible
• Lighthouse Accessibility (dans Chrome DevTools) : Vérifie les éléments focalisables sans styles de focus visibles
• WAVE (outil d’évaluation de l’accessibilité web) : Met en évidence l’ordre de focus et les problèmes de visibilité du focus

Aucun de ces outils n’applique parfaitement les exigences de taille et de contraste de la WCAG 2.2 (la norme est nouvelle), mais ils détectent les problèmes évidents.

Erreurs courantes d’indicateurs de focus

Ce sont les échecs que je vois le plus souvent sur les magasins Shopify :

Erreur 1 : Supprimer le focus entièrement

De nombreux thèmes incluent ce CSS :

*:focus {
  outline: none;
}

Cela supprime tous les indicateurs de focus sur le site. C’est la pire erreur d’accessibilité que vous puissiez faire.

Pourquoi ça arrive : Les concepteurs n’aiment pas le contour de focus par défaut du navigateur et le supprimé sans le remplacer.

Solution : Supprimez cette règle et ajoutez des styles de focus personnalisés en utilisant :focus-visible.

Erreur 2 : Contours invisibles sur les arrière-plans foncés

Un contour de focus bleu clair a l’air génial sur les arrière-plans blancs mais disparaît sur les barres de navigation foncées ou les sections de pied de page.

Exemple d’échec :

a:focus {
  outline: 2px solid #66A3E0; /* Bleu clair */
}

Sur un arrière-plan bleu foncé (#1A2332), ce contour n’a qu’un contraste de 1.8:1 — échoue la WCAG.

Solution : Utilisez différentes couleurs de focus pour les contextes clairs et foncés :

/* Arrière-plan clair */
.light-section a:focus {
  outline: 3px solid #0066CC; /* Bleu foncé */
}

/* Arrière-plan foncé */
.dark-section a:focus {
  outline: 3px solid #FFFFFF; /* Blanc */
}

Ou utilisez une couleur à haut contraste qui fonctionne partout, comme le noir sur les arrière-plans clairs et le blanc sur les arrière-plans foncés.

Erreur 3 : Indicateurs de focus plus petits que 2 pixels

Les contours fins échouent l’exigence de taille de la WCAG 2.2 :

button:focus {
  outline: 1px solid #0066CC; /* Trop fin */
}

Solution : Augmentez à au moins 2 pixels, ou utilisez un contour plus épais d’un côté :

button:focus {
  outline: none;
  border-bottom: 4px solid #0066CC; /* Soulignement épais */
}

Erreur 4 : Compter uniquement sur le changement de couleur

Changer seulement la couleur du texte ou la couleur d’arrière-plan sur le focus échoue si le changement ne crée pas un indicateur visuel clair :

a:focus {
  color: #0066CC; /* Le texte devient bleu */
}

Cela peut être visible pour les utilisateurs voyants, mais les utilisateurs de lecteur d’écran n’obtiennent aucune indication que le focus a bougé. Et si la couleur du texte d’origine était déjà similaire au bleu, le changement peut être trop subtil.

Solution : Ajoutez toujours un indicateur de périmètre (contour, soulignement ou bordure).

Indicateurs de focus pour les méga-menus

Les méga-menus posent un défi unique car ils contiennent plusieurs niveaux de navigation. Quand un utilisateur accède à un méga-menu, où devrait aller le focus ? Quand il descend dans les sous-menus, comment montrez-vous quel élément est en focus ?

Voici un modèle robuste :

/* Élément de navigation de niveau supérieur */
.nav-item > a:focus {
  outline: 3px solid #0066CC;
  outline-offset: -3px; /* À l'intérieur de l'élément */
  background-color: #F0F7FF;
}

/* Éléments du sous-menu */
.mega-menu a:focus {
  background-color: #E6F2FF;
  outline: 2px solid #0066CC;
}

Détails clés :

• Les éléments de niveau supérieur utilisent outline-offset: -3px pour dessiner le contour à l’intérieur de la limite de l’élément, évitant le chevauchement avec les éléments adjacents
• Les éléments du sous-menu reçoivent à la fois une couleur d’arrière-plan (pour se démarquer de la grille) et un contour (pour respecter l’exigence de taille WCAG)

Exemple réel : Navi+ Menu Builder génère des méga-menus avec ce modèle intégré — les éléments de niveau supérieur se mettent en évidence avec une couleur d’arrière-plan et un contour, et les sous-menus utilisent la navigation aux touches fléchées avec des indicateurs de focus clairs sur chaque élément.

Le cas commercial pour de meilleurs indicateurs de focus

La plupart des propriétaires de magasin ne priorisent pas les indicateurs de focus car ils semblent être un petit détail visuel. Mais l’impact est mesurable.

L’enquête 2024 de WebAIM auprès des utilisateurs de lecteur d’écran a trouvé que 87 % des répondants citaient « la navigation au clavier » comme la fonction d’accessibilité la plus importante, avant le texte alternatif, le HTML sémantique et les étiquettes ARIA. Dans la navigation au clavier, les indicateurs de focus visibles ont été classés comme la principale frustration.

Quand les utilisateurs ne peuvent pas voir où ils se trouvent sur la page, ils ne peuvent pas terminer les tâches. Cela se traduit directement par une perte de revenus.

Une recherche de l’Institut Baymard sur l’utilisabilité du paiement montre que « un paiement trop long/compliqué » cause 17 % des abandons de panier. Pour les utilisateurs au clavier sur un site avec de mauvais indicateurs de focus, chaque paiement est trop compliqué — ils passent du temps supplémentaire à se réorienter sur chaque champ, ou ils abandonnent complètement.

Inversement, les sites avec de forts indicateurs de focus voient des taux d’achèvement améliorés. Une étude de Nomensa sur le ROI de l’accessibilité a trouvé que les sites accessibles (y compris une bonne gestion du focus) avaient 23 % plus de taux d’achèvement que les concurrents non accessibles.

De meilleurs indicateurs de focus ne vous aideront pas seulement à réussir les audits. Ils aideront les utilisateurs à terminer leurs achats.

Liste de contrôle de mise en œuvre rapide

Voici un plan d’action de 20 minutes pour améliorer vos indicateurs de focus :

Immédiat (5 minutes) :

1. Ajoutez ce CSS de base à votre thème :

   a:focus-visible,
   button:focus-visible,
   input:focus-visible,
   select:focus-visible {
     outline: 3px solid #0066CC;
     outline-offset: 2px;
   }
   

2. Testez sur votre page d’accueil, votre menu de navigation et votre paiement. Voyez-vous l’indicateur de focus partout ?

Cette semaine (1 heure) :

1. Choisissez une couleur de focus appropriée à la marque qui respecte les exigences de contraste. Utilisez le vérificateur de contraste de WebAIM pour vérifier le rapport 3:1 par rapport à vos couleurs d’arrière-plan principales.

2. Personnalisez les styles de focus pour différentes sections (arrière-plans clairs vs arrière-plans foncés).

3. Testez votre méga-menu (si vous en avez un). Assurez-vous que les éléments du sous-menu en focus sont clairement visibles.

Ce mois-ci (2-3 heures) :

1. Ajoutez des styles de focus spécifiques pour les composants interactifs :
   • Cartes de produits
   • Boutons Ajouter au panier
   • Cases à cocher de filtrage
   • Suggestions d’autocomplétion de recherche
   • Boutons de fermeture de modales

2. Exécutez un audit automatisé avec axe DevTools et corrigez tous les problèmes de focus signalés.

3. Faites naviguer votre site par un collègue (ou un client) en utilisant uniquement le clavier et demandez où le focus est difficile à voir.

Les indicateurs de focus sont l’une des victoires en matière d’accessibilité les plus faciles. Le travail technique est minimal — quelques dizaines de lignes de CSS — mais l’impact est énorme. Chaque utilisateur au clavier qui atterrit sur votre site en bénéficiera.

Cet article fait partie du guide plus large sur Navigation au clavier : pourquoi c’est important au-delà de l’accessibilité.