Contours de focus

Des anneaux de focus visibles indiquent quel contrôle est actif — essentiel à la navigation clavier.

Ce que c’est

Style autour des liens, boutons et champs focalisés. Visible au déplacement du focus avec Tab (ou lorsque :focus est aussi activé pour le pointeur).

Pourquoi les utiliser

• Utilisateurs clavier : impossible de naviguer sans indicateur de focus clair
• Utilisateurs voyants d’assistive tech : confirme où le focus s’est posé
• Tout le monde : meilleure orientation dans les UI denses
• WCAG : soutient 2.4.7 (Focus visible), 1.4.11 (contraste non textuel sur l’indicateur), 2.4.11 (focus non masqué — selon la mise en page)

Notes WCAG

• 1.4.11 Contraste non textuel : indicateur vs couleurs adjacentes
• 2.4.7 Focus visible : le focus clavier doit être visible
• 2.4.11 Focus non masqué : réduire le chevauchement avec l’UI fixe lorsque c’est possible

Trois profils de contour

1. Par défaut : la plupart des éléments interactifs
2. Alternatif : zones à fond différent (p. ex. pied de page sombre)
3. Champs de formulaire : champs, zones de texte, listes

Interface de réglages guidée

Le sélecteur de profils occupe toute la largeur du contenu. Vous pouvez ainsi comparer les profils Par défaut, Alternatif et Champs de formulaire sans utiliser trois panneaux de réglages en parallèle. Un aperçu reste visible : fixe à côté des réglages sur ordinateur et placé avant les contrôles, dans un ordre logique de lecture et de focus, sur les écrans plus petits.

L’aide générale de l’en-tête explique comment choisir entre les trois profils, la différence entre :focus-visible et :focus, une conception robuste tenant compte du contraste et un parcours complet de test au clavier incluant le zoom, les viewports étroits et les éléments de page fixes.

Le passage entre les profils Par défaut et Alternatif conserve l’élément d’aperçu sélectionné ainsi que l’arrière-plan clair ou sombre. Le profil Champs de formulaire passe volontairement à l’exemple de champ de saisie et masque les exemples de bouton et de lien qui ne s’appliquent pas. Lorsque vous quittez ce profil, le type d’élément précédemment sélectionné est restauré.

Les contrôles propres à une méthode n’apparaissent que lorsqu’ils sont utiles. Les sélecteurs CSS et les cas particuliers pour les liens d’image ou les cartes cliquables restent disponibles dans des sections repliables. La configuration courante reste ainsi compacte sans supprimer les options avancées.

Au début de la section ouverte Cas particuliers, un bouton d’aide contextuelle ouvre l’explication complète. Cette aide présente la correction des liens d’image, les cartes avec liens superposés invisibles, l’identification et la limitation des trois sélecteurs nécessaires, le comportement du focus au clavier et à la souris, ainsi que des étapes de test concrètes. Sur petit écran, elle s’ouvre comme un bottom sheet balayable ; sur grand écran, elle utilise le dialogue d’aide partagé.

Pour le profil « Alternatif », la méthode d’ombre portée peut utiliser un indicateur de focus bicolore avec une zone tampon intérieure configurable. L’indicateur reste ainsi visible lorsqu’un composant traverse des arrière-plans clairs et sombres.

Quand utiliser « alternatif »

Lorsque l’anneau par défaut disparaît sur des sections sombres ou saturées.

Cas typiques :

• Pied sombre : passer à un anneau clair (p. ex. blanc sur noir)
• Bandes colorées : choisir un anneau qui reste lisible sur la palette locale
• Cohérence de design : ajuster par zone sans casser le chrome global

Fonctionnement :

• Fournissez des sélecteurs (p. ex. .footer a, .footer button)
• Les éléments correspondants reçoivent l’anneau alternatif et sont exclus des règles par défaut

Quand utiliser les contours « formulaire »

• Les champs affichent souvent un style de focus persistant
• Souvent un poids différent des liens / boutons
• Un contraste plus fort aide les longs formulaires

Fonctionnement :

• Sélecteurs par défaut input, select, textarea
• Excluez les contrôles qui doivent garder l’anneau par défaut (p. ex. input[type= »submit »])

Réglages

Contour par défaut :

• Technique : contour, bordure ou ombre portée
• Style : plein, tirets, pointillés
• Largeur : 1–10 px
• Couleur : RVBA
• Rayon : 0–20 px
• Décalage : espace entre le contrôle et l’anneau (mode contour)
• Ombre intérieure : dessiner à l’intérieur (mode ombre)
• Appliquer sur :focus : inclure le focus souris (par défaut : clavier / :focus-visible uniquement)
• Désactiver les transitions : éviter les flashs animés au focus
• Correctif lien-image : réduire le décalage de mise en page sur les liens autour d’images
• Sélecteurs supplémentaires / exclus

Contour alternatif : mêmes réglages + liste de sélecteurs pour le style alternatif.

Contour formulaire : mêmes réglages + sélecteurs de champs + exclusions.

Exemples

Exemple 1 : base

Contour noir en tirets 2 px, décalage 2 px, correctif lien-image activé.

Exemple 2 : pied sombre

Par défaut : noir 2 px tirets. Alternatif pour .footer a, .footer button : blanc 3 px plein.

Exemple 3 : formulaires

Défaut pour liens / boutons ; profil formulaire pour input, select, textarea en bleu 3 px plein ; exclure les boutons d’envoi du profil formulaire.

Exemple 4 : superposition

Défaut noir 2 px ; alternatif pour .footer a, .footer button, .dark-section a ; profil formulaire pour les champs ; envoi + navigation restent sur le défaut.

Conseils

• Respectez le contraste non textuel (1.4.11)
• Testez sur surfaces claires et sombres
• L’anneau alternatif doit différer nettement du défaut
• Souvent 3 px sur les champs vs 2 px sur les liens
• Le mode ombre est flexible ; le contour est le plus simple ; la bordure peut déplacer la mise en page
• Test Tab dans Chrome, Firefox, Safari
• Gardez le correctif lien-image sauf conflit
• Cadrez les sélecteurs alternatifs (p. ex. .footer a, pas un a nu)

Problèmes courants

Anneau invisible

Vérifiez le contraste sur le fond ; ajoutez un profil alternatif ; activez le correctif lien-image.

Le thème écrase les styles

Essayez l’option rayon de bordure !important ou la technique ombre portée.

Saut de mise en page au focus

Activez le correctif lien-image ; préférez le contour à la bordure si possible.

Notes techniques

• CSS pur — pas de JS requis
• Les défauts utilisent :focus-visible sauf si « appliquer sur :focus » est activé
• Les profils alternatif et formulaire remplacent le défaut pour les éléments correspondants
• Chaque élément n’utilise qu’un seul profil

Disponible pour : tous les plans Free

Étiquettes de sélecteurs et exclusions automatiques

Valide chaque sélecteur CSS avec Entrée ou une virgule. Les entrées enregistrées apparaissent sous forme d’étiquettes supprimables ; tu peux aussi coller une liste séparée par des virgules. Le texte en attente est ajouté quand tu quittes le champ ou enregistres.

Dans le profil Standard, le champ des sélecteurs exclus affiche aussi des étiquettes automatiques regroupées selon leur origine : focus alternatif ou champs de formulaire. Les profils actifs actualisent immédiatement ces exclusions et affichent une confirmation dans le profil modifié. Modifie les étiquettes automatiques dans leur profil d’origine : supprimer un sélecteur ou désactiver le profil supprime son exclusion automatique. Les exclusions manuelles sont conservées. Les exceptions de formulaire gardent le focus standard, sauf si tu les exclus aussi explicitement à cet endroit. Enregistre les réglages pour appliquer les changements au site.