Système de Conception des Indicateurs de Focus (Focus Indicator…

Système de Conception des Indicateurs de Focus

Objectif

Le Système de Conception des Indicateurs de Focus fournit une méthodologie systématique pour concevoir, spécifier et auditer les indicateurs de focus clavier sur tous les éléments interactifs (boutons, liens, champs de formulaire, commutateurs personnalisés et widgets complexes).

Les indicateurs de focus sont le principal repère visuel pour les utilisateurs de la navigation au clavier, les utilisateurs de lecteurs d'écran et les personnes utilisant des entrées alternatives. Lorsque les concepteurs masquent l'anneau de focus natif parce qu'il « n'est pas beau » ou le remplacent par une surcouche à faible contraste, ils créent une barrière d'accessibilité immédiate et catastrophique. Ce système garantit que les indicateurs de focus sont aux couleurs de la marque, à fort contraste, positionnés de manière robuste et conformes aux normes WCAG 2.1 et 2.2, sans compromettre l'esthétique visuelle.

Cas d'Utilisation

• Création de Système de Conception : Établir des états de focus globaux basés sur des jetons dans une bibliothèque d'interface utilisateur de marque.
• Spécifications de Conception de Composants : Définir des anneaux de focus personnalisés pour des éléments complexes (par exemple, cases à cocher personnalisées, curseurs de plage ou groupes d'onglets).
• Audits de Remédiation d'Accessibilité : Identifier et corriger les contours de focus invisibles ou à faible contraste sur un site Web existant.
• Adaptations aux Thèmes et Arrière-Plans : Standardiser les indicateurs de focus pour les arrière-plans clairs, sombres et de marque.
• Optimisation des Entrées Multiplateforme : Configurer les comportements :focus-visible pour garantir que les utilisateurs de souris ne voient pas d'anneaux de focus gênants tandis que les navigateurs clavier obtiennent des indicateurs très visibles.

Quand NE PAS Utiliser

• Contenu Statique : Ne pas concevoir d'indicateurs de focus pour des éléments non interactifs (par exemple, des paragraphes simples, des images, des en-têtes ou des cartes informatives sans liens).
• Contrôles Natifs Non Modifiés : Si un projet repose uniquement sur les contrôles de navigateur par défaut sans aucun style personnalisé ni surcouche de marque, et que le comportement de focus natif est complètement intact.
• Modalités de Guidage Alternatives : Sur les écrans intelligents à commande vocale ou les applications mobiles natives purement tactiles où les anneaux de focus de type clavier ne font pas partie de l'architecture d'accessibilité standard de la plateforme.

Entrées

1. Palette de Marque et Jetons d'Arrière-Plan : Couleurs principales, couleurs d'arrière-plan (clair, sombre et teinté de marque) et bordures de conteneurs.
2. Inventaire des Éléments Interactifs : Une liste de tous les composants d'interface utilisateur interactifs nécessitant des états de focus (boutons, liens, champs de texte, boutons radio, superpositions personnalisées).
3. Système de Rayons de Coin : Jetons de valeur pour l'arrondi des composants (par exemple, --radius-s, --radius-m) pour garantir que les anneaux de focus correspondent à la forme de l'élément.
4. Niveau WCAG Cible : Conformité minimale AA standard (WCAG 2.1/2.2) ou cible AAA.

Sorties

1. Jetons de Focus Globaux : Jetons de conception standardisés définissant la couleur, l'épaisseur, le style de contour et l'espacement de décalage de l'anneau de focus.
2. Spécifications de Focus Spécifiques aux Composants : Règles de disposition spatiale pour les anneaux de focus internes, les anneaux de focus externes et les contours imbriqués complexes.
3. Règles de Style pour le Mode Contraste Élevé (Couleurs Forcées) : Spécifications CSS garantissant la compatibilité avec le mode couleurs forcées de Windows.
4. Logique d'Intégration Focus-Visible : Spécifications séparant les signaux de navigation clavier des réponses aux clics de souris.

Flux de Travail

1. Cataloguer les Contextes des Composants

Auditer les composants interactifs et les regrouper par arrière-plan de conteneur pour déterminer les exigences de contraste du focus :

• Arrière-plans clairs : Nécessitent un anneau de focus foncé.
• Arrière-plans sombres : Nécessitent un anneau de focus clair.
• Arrière-plans de marque (par exemple, Bleu Vif) : Peuvent nécessiter un anneau blanc neutre ou secondaire à contraste élevé, car les contours standard aux couleurs de la marque se fondraient dans l'arrière-plan.

2. Définir le Modèle de Taille et de Placement

Sélectionner la relation géométrique entre l'élément et son anneau de focus :

• Contour Décalé Externe : L'anneau de focus est positionné à l'extérieur de la bordure de l'élément en utilisant un espace transparent (décalage). Recommandé pour les boutons, les balises et les liens.
• Anneau de Focus Interne : L'anneau de focus est positionné à l'intérieur des bordures de l'élément. Recommandé pour les champs de texte, les menus déroulants et les éléments rognés par overflow: hidden.
• Halo de Contraste (Double Anneau) : Un anneau extérieur enveloppé d'une ligne contrastante secondaire (par exemple, un anneau blanc de 2px avec un contour noir de 1px). Extrêmement robuste, car il garantit la visibilité sur n'importe quel arrière-plan.

3. Établir les Jetons de Contraste et de Taille WCAG

Déterminer les valeurs de style minimales pour satisfaire aux WCAG :

• Définir une épaisseur d'anneau de focus d'au moins 2px (3px de préférence).
• Maintenir un rapport de contraste minimal de 3:1 par rapport à l'arrière-plan adjacent et par rapport à l'état non focus de l'élément.
• S'assurer que l'indicateur de focus a une surface au moins égale à une bordure solide de 2px autour du périmètre du contrôle (WCAG 2.2 Focus Appearance).

4. Séparer les États Pointeur vs. Clavier

Éviter les « frictions de conception » en utilisant la pseudo-classe :focus-visible.

• Navigation clavier (:focus-visible) : Déclenche des indicateurs de focus visuellement proéminents et à fort contraste.
• Interaction souris/tactile (:focus sans :focus-visible) : Maintient les anneaux de focus supprimés ou extrêmement subtils pour les clics de souris, évitant les plaintes de conception tout en maintenant une accessibilité complète.

5. Définir les Replis pour le Mode Contraste Élevé

S'assurer que les indicateurs de focus ne disparaissent pas sous les préférences de style d'assistance (comme le mode contraste élevé / couleurs forcées de Windows) :

• Le outline natif avec couleur transparente est automatiquement mappé par les couleurs forcées, mais les styles box-shadow personnalisés sont ignorés.
• Toujours inclure un repli outline (même s'il est défini sur outline: 2px solid transparent ou en utilisant outline-color: CanvasText dans les requêtes média) afin que le mode contraste élevé affiche un contour visible.

Règles de Décision

Règle 1 : Placement de l'Anneau Interne vs. Externe

• Utiliser un Contour Décalé Externe si l'élément a des bordures personnalisées et n'a pas de masque de débordement (overflow: hidden).
• Utiliser un Anneau de Focus Interne (box-shadow: inset ...) si l'élément fait partie d'une grille serrée, a overflow: hidden sur son conteneur parent, ou s'il s'agit d'un champ de saisie de texte où les contours externes chevaucheraient les éléments adjacents.

Règle 2 : Anneau Monochrome vs. Halo Bicolore

• Utiliser un Anneau Monochrome si l'arrière-plan est uniforme et prévisible (par exemple, toujours clair ou toujours sombre) et que le contraste est vérifié à >= 3:1.
• Utiliser un Halo de Contraste Bicolore (par exemple, bleu foncé intérieur, blanc pur extérieur) si l'élément se trouve sur des images, des dégradés, du contenu généré par l'utilisateur ou glisse entre des arrière-plans variables (comme des en-têtes collants défilant sur des limites de sections).

Règle 3 : Rayon de Bordure de l'Anneau de Focus

• Le contour du focus doit refléter le border-radius de son contrôle parent.
• S'assurer que outline-offset est positif (par exemple, 2px ou 4px) et que le rayon de bordure du contour correspond à la courbure de la carte/bouton, ou utiliser box-shadow qui se mappe naturellement aux coins arrondis du composant.

CORRECT:
[   Bouton (Rayon 8px)   ]
   (Espace : 2px)
============================= Contour de Focus (Rayon 10px)

INCORRECT:
[   Bouton (Rayon 8px)   ]
   (Espace : 2px)
----------------------------- Contour de Focus (Coins à 90 degrés)

Contraintes

• Accessibilité (Contraste) : L'anneau de focus doit avoir un rapport de contraste d'au moins 3:1 par rapport à son arrière-plan environnant (WCAG 2.1 SC 1.4.11 Non-text Contrast).
• Accessibilité (Visibilité) : L'indicateur doit être entièrement visible. Les indicateurs de focus ne doivent jamais être cachés derrière des en-têtes collants, des widgets de chat flottants ou des superpositions (WCAG 2.2 SC 2.4.11 Focus Not Obscured).
• Accessibilité (Apparence) : L'indicateur de focus doit être suffisamment grand. Il doit satisfaire le calcul du WCAG 2.2 SC 2.4.13 (Focus Appearance) : une largeur minimale de 2px et une surface minimale égale au périmètre multiplié par 2px.
• Responsivité : Les indicateurs de focus ne doivent pas étirer le conteneur ni déclencher un débordement de mise en page horizontal. Toujours utiliser le positionnement absolu, les contours CSS absolus ou les box-shadows internes, qui ne modifient pas le flux de mise en page DOM.

Schémas d'Échec Courants

• Le :focus { outline: none; } Effaceur : Masquer complètement l'indicateur de focus sans fournir un remplacement de pseudo-classe robuste.
• Les Anneaux « Fantômes » à Faible Contraste : Utiliser un contour gris clair sur fond blanc, rendant l'état de focus actif invisible pour les utilisateurs ayant une vision à faible contraste.
• Le Piège du « Contour Rogné » : Placer un anneau de focus externe sur un élément imbriqué dans un conteneur avec overflow: hidden. L'indicateur de focus est coupé à gauche et à droite, ne laissant que des fragments horizontaux.
• Le « Masquage par l'En-Tête Collant » : Mettre le focus sur un élément d'ancrage situé en haut de la zone d'affichage, mais la barre de navigation collante le chevauche et le masque complètement (violation WCAG 2.2 SC 2.4.11).
• L'Encombrement du Focus par Clic : Ne pas utiliser :focus-visible, conduisant à des anneaux bleus lourds qui clignotent à chaque clic de souris, ce qui frustre les équipes de conception et les pousse à demander la suppression totale des styles de focus.
• L'Effacement par les Couleurs Forcées : Construire de beaux anneaux de focus uniquement à partir de propriétés personnalisées CSS et de valeurs box-shadow sans un repli outline transparent, ce qui donne des indicateurs de focus complètement invisibles en mode contraste élevé de Windows.

Critères de Validation

• Chaque élément interactif affiche un indicateur de focus très visible et distinct lorsqu'il est atteint via la touche Tab.
• Le contraste de chaque indicateur de focus global et spécifique au composant est vérifié à >= 3:1 par rapport à son arrière-plan.
• Le style de focus personnalisé utilise le sélecteur :focus-visible pour garantir qu'il se déclenche lors de la navigation au clavier mais reste propre lors des clics de souris.
• Aucun indicateur de focus n'est rogné ou coupé par les règles overflow: hidden du conteneur parent (soit le décalage ajusté, soit déplacé en interne).
• La navigation au clavier vers des éléments proches des en-têtes collants ou des éléments flottants maintient l'élément ciblé entièrement visible (en utilisant des surcharges scroll-margin-top).
• Les indicateurs de focus sont vérifiés en mode contraste élevé / couleurs forcées à l'aide de règles de contour transparent.
• La surface du périmètre des indicateurs personnalisés répond aux calculs minimaux du WCAG 2.2 SC 2.4.13.