Indicateurs de focus : concevoir des styles accessibles et visibles

L'indicateur de focus est l'équivalent du curseur souris pour les utilisateurs clavier. Sans lui, ils se retrouvent perdus sur la page, incapables de savoir quel élément est actuellement sélectionné. Ce guide vous montre comment créer des indicateurs de focus accessibles et esthétiques.

Pourquoi le focus visible est critique

L'indicateur de focus remplit plusieurs fonctions essentielles :

• Orientation : Savoir où l'on se trouve sur la page
• Confirmation : Vérifier que la navigation clavier fonctionne
• Anticipation : Voir quel élément sera activé

Sans focus visible, la navigation clavier devient une expérience frustrante d'essais et erreurs.

[!NOTE] Le critère RGAA 10.7 et WCAG 2.4.7 (niveau AA) exigent que tous les éléments interactifs aient un indicateur de focus visible. Supprimer outline: none sans alternative est une violation d'accessibilité.

Les exigences WCAG

WCAG 2.4.7 : Focus Visible (Niveau AA)

Ce critère fondamental stipule que le focus clavier doit être visible. Il n'impose pas de style particulier, mais le focus doit être perceptible.

WCAG 2.4.13 : Focus Appearance (Niveau AAA)

Ce critère plus strict, introduit dans WCAG 2.2, précise :

• L'indicateur doit avoir un ratio de contraste d'au moins 3:1 avec les couleurs adjacentes
• L'indicateur doit être suffisamment grand (au moins 2px d'épaisseur sur le périmètre)

L'erreur classique : supprimer l'outline

L'une des erreurs les plus répandues est de supprimer l'outline par défaut pour des raisons esthétiques :

/* NE FAITES PAS CECI sans alternative */
*:focus {
  outline: none;
}

/* NE FAITES PAS CECI non plus */
button:focus,
a:focus {
  outline: 0;
}

Cette pratique rend votre site inutilisable pour les utilisateurs clavier.

Créer des indicateurs de focus accessibles

La base : outline

L'outline est la propriété idéale pour les indicateurs de focus car :

• Elle ne modifie pas les dimensions de l'élément
• Elle ne décale pas la mise en page
• Elle est bien supportée par tous les navigateurs

:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

outline-offset pour plus de visibilité

outline-offset ajoute un espace entre l'élément et l'outline, améliorant la visibilité :

button:focus {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

Cet espace est particulièrement utile quand la couleur de l'élément est proche de la couleur de l'outline.

Styles de ligne

Variez les styles selon vos besoins design :

/* Ligne pleine (plus visible) */
:focus {
  outline: 3px solid #005fcc;
}

/* Ligne double */
:focus {
  outline: 3px double #005fcc;
}

/* Pointillés (moins visible, à éviter) */
:focus {
  outline: 3px dashed #005fcc;
}

[!TIP] Privilégiez les outlines solides de 2-3px minimum. Les lignes pointillées ou fines sont moins visibles et peuvent ne pas satisfaire WCAG 2.4.13.

La pseudo-classe :focus-visible

Le problème du focus au clic

L'outline par défaut apparaît aussi lors d'un clic souris, ce qui peut être inesthétique :

/* apparaît au clic ET au clavier */
button:focus {
  outline: 3px solid #005fcc;
}

La solution : :focus-visible

:focus-visible n'applique le style que lorsque le focus est "pertinent", typiquement lors de la navigation clavier :

/* N'apparaît qu'au clavier */
button:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* Supprimer le focus par défaut de manière sécurisée */
button:focus:not(:focus-visible) {
  outline: none;
}

Quand focus-visible s'applique

Le navigateur décide d'appliquer :focus-visible selon l'heuristique suivante :

• Tab / navigation clavier → :focus-visible s'applique
• Clic souris → :focus-visible ne s'applique généralement pas
• Champs de saisie → :focus-visible s'applique toujours (même au clic)

/* Les inputs ont toujours le focus visible au clic */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

Contraste du focus

Exigences de contraste

Votre indicateur de focus doit avoir un contraste suffisant avec :

1. L'arrière-plan de la page
2. L'élément lui-même (si l'outline est sur l'élément)

/* Bon : bleu foncé sur fond blanc */
:focus-visible {
  outline: 3px solid #005fcc; /* Contraste 7.5:1 avec blanc */
}

/* Mauvais : jaune clair sur fond blanc */
:focus-visible {
  outline: 3px solid #ffff00; /* Contraste insuffisant */
}

Utilisez notre vérificateur de contraste pour valider vos choix.

Focus sur fond variable

Si votre arrière-plan varie, utilisez un double-outline :

:focus-visible {
  outline: 3px solid white;
  box-shadow: 0 0 0 6px #005fcc;
}

Ou une combinaison de couleurs :

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  box-shadow:
    0 0 0 3px white,
    0 0 0 6px #005fcc;
}

Styles alternatifs au outline

box-shadow

Le box-shadow peut créer des effets de "halo" :

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #005fcc;
}

Attention : box-shadow peut être coupé par overflow: hidden sur le parent.

Border (avec précaution)

Évitez border pour le focus car il modifie les dimensions :

/* Problématique : décale la mise en page */
button:focus {
  border: 3px solid blue;
}

/* Solution : prévoir la border à l'avance */
button {
  border: 3px solid transparent;
}
button:focus {
  border-color: #005fcc;
}

Changement de background

Peut être combiné avec l'outline pour plus de visibilité :

:focus-visible {
  outline: 3px solid #005fcc;
  background-color: #e6f0ff;
}

Exemples par composant

Boutons

button:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* Variante avec style de bouton inverse */
button.primary:focus-visible {
  outline: 3px solid white;
  outline-offset: 2px;
}

Liens

a:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  text-decoration: underline;
  background-color: #fffde7;
}

Champs de formulaire

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 0; /* Colle à l'élément */
  border-color: #005fcc;
}

Cards cliquables

.card:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 4px;
  border-radius: 8px; /* Si la card a des coins arrondis */
}

Utiliser notre générateur

Notre générateur de focus ring vous permet de :

• Prévisualiser différents styles de focus
• Tester sur différents fonds
• Vérifier le contraste
• Copier le CSS prêt à l'emploi

C'est un outil pratique pour expérimenter avant d'implémenter.

Bonnes pratiques supplémentaires

Cohérence

Utilisez le même style de focus sur tout le site pour une expérience prévisible :

/* Variables CSS pour la cohérence */
:root {
  --focus-color: #005fcc;
  --focus-width: 3px;
  --focus-offset: 2px;
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

Ne pas cacher le focus au survol

/* Mauvais : le focus disparaît au hover */
button:hover {
  outline: none;
}

/* Bon : les deux coexistent */
button:hover:focus-visible {
  outline: 3px solid #005fcc;
  background-color: #f0f0f0;
}

Tester avec prefers-reduced-motion

Certains utilisateurs préfèrent éviter les animations :

@media (prefers-reduced-motion: reduce) {
  :focus-visible {
    transition: none;
  }
}

Respecter l'outline natif dans les formulaires

Les inputs peuvent avoir besoin de l'outline même au clic :

/* Les inputs gardent toujours le focus visible */
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid #005fcc;
}

Test de vos indicateurs de focus

Test manuel

1. Débranchez votre souris (ou ne l'utilisez pas)
2. Naviguez sur votre site avec Tab et Shift+Tab
3. Vérifiez que le focus est toujours visible
4. Testez sur différentes sections (navigation, formulaires, contenu)

Outils automatiques

Notre outil d'audit RGAA vérifie la présence d'indicateurs de focus et peut détecter outline: none sans alternative.

Simulation de déficience visuelle

Testez vos indicateurs avec des simulateurs de :

• Daltonisme
• Basse vision
• Contraste réduit

Conclusion

L'indicateur de focus est un élément crucial de l'accessibilité qui mérite une attention particulière lors du design. Plutôt que de supprimer les outlines par défaut, créez des styles de focus qui s'intègrent harmonieusement à votre design tout en restant hautement visibles.

En combinant :focus-visible, un contraste adéquat et des styles cohérents, vous offrez une expérience de navigation clavier agréable à tous vos utilisateurs. N'oubliez pas : un bon indicateur de focus bénéficie aussi aux utilisateurs souris qui peuvent occasionnellement utiliser le clavier.