coastdigitalgroup/coastai-skills

Système de Conception d'Interrupteurs et de Commutateurs

Objectif

Le Système de Conception d'Interrupteurs et de Commutateurs fournit un cadre standardisé pour concevoir, positionner et implémenter des contrôles d'état binaires dans les interfaces web. Les interrupteurs représentent des interrupteurs physiques marche/arrêt qui déclenchent ou modifient immédiatement un état, définissent une préférence ou un statut de fonctionnalité sans nécessiter une étape de soumission manuelle de formulaire (comme cliquer sur « Enregistrer »).

Sans un système de conception dédié aux commutateurs, les interfaces utilisent fréquemment des interrupteurs à la place de cases à cocher, ne respectent pas les exigences de contraste WCAG dans les états désactivés ou inactifs, manquent d'étiquettes d'état claires, créent des zones tactiles trop petites pour les écrans mobiles, ou provoquent des changements de mise en page inattendus et des effets secondaires d'arrière-plan sans retour visuel immédiat.

Ce système établit des règles pour la géométrie des commutateurs, les proportions de la piste et du pouce, l'alignement des étiquettes, la cartographie des couleurs d'état, l'accessibilité clavier (role="switch"), l'expansion de la zone tactile, les dispositions responsives des listes et les états de chargement asynchrones.

Cas d'Utilisation

• Paramètres et Préférences de l'Application : Activation/désactivation instantanée des préférences système (par ex. « Notifications Push », « Thème Sombre », « Sauvegarde automatique des brouillons », ou « Authentification à Deux Facteurs »).
• Sélection de Période d'Abonnement et de Facturation : Basculement des niveaux de prix des cartes entre les cycles de facturation Mensuel et Annuel avec des badges de réduction en ligne.
• Contrôle des Lignes de Tableau de Données : Activation ou désactivation de l'accès utilisateur individuel, des intégrations API, des webhooks ou des règles automatisées directement dans les lignes du tableau de données.
• Basculement des Drapeaux de Fonctionnalité et Modes Système : Activation/désactivation des états opérationnels dans les tableaux de bord des développeurs (par ex. « Mode Maintenance », « Journalisation de Débogage », ou « Fonctionnalités Bêta »).
• Panneaux de Confidentialité et de Consentement aux Cookies : Gestion des autorisations de suivi granulaires (par ex. « Cookies d'Analyse », « Cookies Marketing ») dans des tiroirs coulissants ou des boîtes de dialogue modales.

Quand ne PAS Utiliser

• Sélection Multi-Options : Pour choisir entre 3 options mutuellement exclusives ou plus, utiliser système-de-contrôle-segmenté ou système-de-sélection-personnalisée-et-combobox.
• Soumissions de Formulaire Nécessitant une Approbation Explicite : Pour les conditions d'accord (par ex. « J'accepte les Conditions Générales ») dans un formulaire multi-champs standard nécessitant un clic sur « Soumettre », utiliser des cases à cocher standard (système-de-conception-de-formulaire).
• Choix Binaire sans Effet Immédiat : Si le fait d'actionner la commande ne prend effet qu'après avoir cliqué sur un bouton secondaire « Appliquer » ou « Enregistrer les modifications », utiliser une case à cocher plutôt qu'un interrupteur.
• Sélection en Masse dans les Tableaux : Pour sélectionner plusieurs éléments pour des opérations par lots (par ex. « Supprimer la sélection »), utiliser des cases à cocher (système-d-interface-utilisateur-de-tableau-de-données).

Entrées

1. Définition de l'État : Paramètres d'état binaires (Off/Décoché/false vs. On/Coché/true).
2. Contexte et Mode d'Exécution : Changement d'état immédiat côté client (par ex. interrupteur de thème sombre) vs. Effet secondaire asynchrone côté serveur (par ex. activation/désactivation d'un webhook API).
3. Structure d'Étiquetage : Texte d'étiquette en ligne, texte d'aide/description de support et exigence de badge de statut.
4. Contexte de Mise en Page : Carte de paramètre autonome, ligne de tableau dense, groupe de préférences multi-éléments ou bascule de prix hero.
5. Palette de Thème et de Jetons : Couleurs de surface, couleur de piste active, couleur de piste inactive, couleur du pouce et jetons de décalage de l'anneau de focus.

Sorties

1. Spécification de Géométrie et de Jetons du Commutateur : Dimensions spatiales pour la largeur de la piste, la hauteur, le diamètre du pouce, le rayon des coins et les temporisations de transition (largeur : 44 px, hauteur : 24 px, pouce : 20 px).
2. Plan d'État et de Contraste : Jetons de palette garantissant un contraste minimal WCAG 3:1 des objets graphiques pour les pistes et les pouces dans les états Par Défaut (Off), Actif (On), Survol, Focus-Visible, Désactivé et En Attente.
3. Spécification de Mise en Page Structurelle et de Typographie : Relations d'espacement entre l'élément de l'interrupteur, l'étiquette principale (h4/span), le texte de description et les indicateurs de statut optionnels (ON/OFF).
4. Accessibilité et Mappage ARIA : Structure HTML sémantique <button role="switch" aria-checked="true|false"> avec association d'étiquette pour lecteur d'écran (aria-labelledby / aria-describedby).
5. Protocole de Gestion Asynchrone : Spécification d'état de chargement visuel (pouce de spinner ou opacité réduite de la piste) pour la vérification réseau en arrière-plan.

---

Flux de Travail

1. Déterminer la Sémantique du Contrôle (Interrupteur vs Case à Cocher)

Avant la conception visuelle, confirmer que l'intention d'interaction correspond au modèle mental de l'interrupteur physique :

• Effet Immédiat : Actionner l'interrupteur prend effet instantanément (ou déclenche une requête immédiate en arrière-plan).
• Action Autonome : Fonctionne indépendamment sans nécessiter de bouton de confirmation explicite « Enregistrer » ou « Soumettre ».
• Métaphore d'État On/Off : Représente l'activation ou la désactivation d'une fonctionnalité ou d'un statut, plutôt que de faire une sélection dans un questionnaire multi-champs.

2. Établir la Géométrie Spatiale et les Marges Tactiles

Concevoir les composants de l'interrupteur avec des proportions qui s'alignent sur les directives tactiles mobiles tout en maintenant une harmonie visuelle sur le bureau :

[   PISTE INACTIVE / OFF   ]          [    PISTE ACTIVE / ON    ]
+--------------------------+          +-------------------------+
|  (Pouce)                 |  ----->  |                 (Pouce) |
|   20px                   |          |                  20px   |
+--------------------------+          +-------------------------+
<-------- 44px ------------>          <-------- 44px ----------->
           24px hauteur                                24px hauteur

• Échelle Standard du Commutateur :
  • Largeur de la Piste : 44px (ou 2.75rem)
  • Hauteur de la Piste : 24px (ou 1.5rem)
  • Rayon de la Piste : 999px (Forme de pilule complète)
  • Diamètre du Pouce : 20px (laissant un retrait de piste interne de 2px sur tous les côtés)
  • Rayon du Pouce : 50% (Cercle)
• Échelle Compacte / Dense du Commutateur (Lignes de Tableau) :
  • Largeur de la Piste : 36px
  • Hauteur de la Piste : 20px
  • Diamètre du Pouce : 16px (avec retrait de 2px)
• Zone Tactile Incluante :
  • La zone de clic interactive DOIT être étendue à au moins 44x44px sur les appareils mobiles en utilisant des pseudo-éléments (::before / ::after) ou du remplissage, empêchant les clics erronés sur les écrans tactiles.

3. Définir les Jetons de Couleur d'État et les Métriques de Contraste

Pour satisfaire aux exigences de contraste non textuel WCAG 2.1 / 2.2 AA (SC 1.4.11 - contraste minimum 3:1), suivre des paires de jetons de couleur strictes :

• État Inactif / Off :
  • Fond de la Piste : Surface grise neutre (#E2E8F0 / mode sombre : #334155).
  • Bordure de la Piste : Bordure de 1px (#CBD5E1 / mode sombre : #475569) pour garantir un contraste 3:1 par rapport aux surfaces d'arrière-plan claires.
  • Couleur du Pouce : Blanc uni ou surface claire (#FFFFFF / mode sombre : #F8FAFC).
  • Icône Optionnelle à l'intérieur du Pouce : Icône Lune/Soleil ou Croix/Check (12px) pour un double retour visuel.
• État Actif / On :
  • Fond de la Piste : Couleur d'action de la marque ou du système à contraste élevé (#2563EB bleu primaire ou #16A34A vert succès). Le rapport de contraste par rapport à la surface de la page d'arrière-plan doit dépasser 3:1.
  • Bordure de la Piste : Transparente ou correspondant à la bordure active.
  • Couleur du Pouce : Blanc uni (#FFFFFF) avec une transition CSS fluide (transform : translateX(20px) sur 200ms cubic-bezier(0.4, 0, 0.2, 1)).
• États de Survol (Hover) et de Focus :
  • Survol : Changement subtil de luminosité de la piste (+5% ou -5%) ou agrandissement de l'ombre du pouce (box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15)).
  • Focus-Visible : Anneau de focus décalé distinct de 2px (outline: 2px solid #2563EB; outline-offset: 2px).
• État Désactivé :
  • Opacité de la Piste et du Pouce : Réduite à 0.5 ou 0.4 avec cursor : not-allowed.

4. Alignement des Étiquettes et Hiérarchie des Descriptions

Les interrupteurs doivent toujours être accompagnés d'étiquettes textuelles claires. Ne jamais présenter un interrupteur isolé sans étiquette accessible ou contexte visible.

• Disposition en Ligne Horizontale (Carte de Préférence par Défaut) :
  • Placer le bloc de texte à gauche (Titre + Description) et positionner l'interrupteur sur le bord droit.
  • Aligner le centre vertical de la piste de l'interrupteur avec la première ligne du texte du titre (pas centré sur les descriptions multi-lignes).
  • Maintenir un espace minimum de 16px entre le texte du titre et l'élément de l'interrupteur.
• Disposition en Ligne de Formulaire :
  • Placer l'interrupteur à gauche et le texte de l'étiquette à droite (gap: 12px), recommandé lorsque les interrupteurs sont intégrés dans des champs de formulaire denses.
• Disposition de Bascule de Niveau de Prix :
  • Centrer l'interrupteur horizontalement entre deux options d'étiquette explicites (par exemple, « Mensuel » — [ Interrupteur ] — « Annuel (Économisez 20%) »). Cliquer sur l'un ou l'autre des textes d'étiquette ou sur l'interrupteur bascule l'état actif.

5. Gérer les Effets Secondaires Asynchrones et les États de Chargement

Lorsqu'un interrupteur déclenche un appel API asynchrone (par exemple, modifier un paramètre de ressource cloud ou activer une intégration) :

1. État Visuel Optimiste : Faire glisser instantanément le pouce vers la position cible (aria-checked="true").
2. Retour d'Information en Attente : Rendre une superposition de spinner subtile à l'intérieur du pouce ou réduire légèrement l'opacité de la piste pendant la latence réseau.
3. Récupération d'Erreur : Si le serveur renvoie une erreur, afficher un message toast/alerte en ligne et animer doucement le pouce vers son état précédent avec aria-checked="false".

6. Implémenter les Modèles d'Accessibilité WCAG AA

Assurer la navigation clavier native et la prise en charge des lecteurs d'écran sur tous les moteurs de navigation :

• Balise HTML Sémantique :

  <button
    type="button"
    role="switch"
    aria-checked="true"
    id="push-notifications-switch"
    aria-labelledby="push-notifications-label"
    aria-describedby="push-notifications-desc"
    class="toggle-switch">
    <span class="toggle-switch__track">
      <span class="toggle-switch__thumb"></span>
    </span>
  </button>
  

• Interaction Clavier :
  • Accessible via la navigation par touche Tab.
  • Appuyer sur Espace ou Entrée bascule l'état aria-checked (true <-> false) et déclenche le gestionnaire associé.
• Annonces du Lecteur d'Écran :
  • Les lecteurs d'écran annoncent explicitement : « Notifications Push, interrupteur, activé » ou « Notifications Push, interrupteur, désactivé ».
  • NE PAS écrire de texte comme « On/Off » à l'intérieur de l'étiquette si cela duplique l'état ARIA natif de l'interrupteur.

---

Règles de Décision

Matrice de Sélection : Interrupteur vs. Case à Cocher vs. Contrôle Segmenté

Scénario / Exigence	Contrôle Recommandé	Raison
Choix binaire unique avec effet immédiat (par ex., Thème Sombre)	Interrupteur	Le modèle d'exécution instantanée correspond à un interrupteur physique.
Choix binaire unique dans un formulaire soumis (par ex., Accepter les Conditions)	Case à Cocher	Les modifications ne prennent effet qu'après avoir cliqué sur le bouton « Soumettre ».
Sélection de plusieurs éléments dans une liste (par ex., Sélectionner 5 e-mails)	Cases à Cocher	Comportement de sélection par lots standard.
Choix entre 2 modes distincts (par ex., Vue Grille vs. Vue Liste)	Contrôle Segmenté	Les deux étiquettes d'état restent visibles côte à côte.
Activation/désactivation d'une option dans une vue en liste mobile	Interrupteur	Cible de pouce claire et retour d'état explicite.

Matrice de Position des Étiquettes

Contexte de Mise en Page	Position de l'Interrupteur	Position de l'Étiquette	Comportement Spatial
Liste de Préférences de Paramètres	Aligné à droite	Aligné à gauche	justify-content: space-between dans le conteneur de ligne.
Champ de Formulaire en Ligne	Aligné à gauche	Aligné à droite	display: inline-flex; align-items: center; gap: 12px.
Bascule de Prix Hero	Ancré au centre	Flanquant Gauche & Droite	Flanqué par les options de texte « Mensuel » et « Annuel ».

---

Contraintes

• Accessibilité (WCAG 2.1 / 2.2 AA) :
  • Rapport de contraste non textuel minimum de 3:1 pour la bordure/fond de la piste et le pouce par rapport au fond de la page dans les états On et Off.
  • Rapport de contraste texte minimum de 4.5:1 pour toutes les étiquettes associées et le texte d'aide de la description.
  • L'anneau de focus doit fournir un contraste d'au moins 3:1 par rapport au fond environnant et mesurer au moins 2 px d'épaisseur.
• Cibles Tactiles :
  • La zone tactile interactive doit mesurer au moins 44x44px sur les appareils tactiles (WCAG 2.5.5 / 2.5.8).
• Indépendance de la Couleur :
  • La couleur NE doit PAS être le seul indicateur d'état. La position spatiale physique du pouce (gauche = off, droite = on) et la valeur sémantique aria-checked doivent communiquer l'état indépendamment de la couleur.

---

Modèles d'Échec Courants

• Utilisation Inappropriate des Interrupteurs dans les Formulaires Soumis : Utiliser des interrupteurs dans des formulaires où les modifications ne prennent effet qu'après avoir cliqué sur un bouton « Enregistrer » séparé, ce qui perturbe les utilisateurs qui s'attendent à une application instantanée.
• Contraste Insuffisant de la Piste : Utiliser des pistes grises claires (#F1F5F9) sur des fonds blancs sans bordure de délimitation, rendant l'interrupteur invisible pour les utilisateurs malvoyants.
• Communication d'État Uniquement par la Couleur : Se fier strictement aux couleurs de piste rouge vs. vert sans déplacer la position du curseur du pouce ou mettre à jour les attributs ARIA.
• Cibles Tactiles Microscopiques : Restreindre la zone de clic à la piste visuelle de 36x20px, provoquant de la frustration et des tap manqués sur les écrans mobiles.
• Étiquettes Accessibles Manquantes : Rendre des interrupteurs icône autonomes sans aria-label ou référence aria-labelledby.
• Texte Multi-Lignes Chevauchement : Centrer l'interrupteur verticalement contre un long paragraphe de description de 4 lignes, brisant l'alignement visuel avec le titre principal.

---

Critères de Validation

• L'interrupteur utilise la structure HTML sémantique <button role="switch" aria-checked="true|false">.
• La piste et le pouce satisfont au rapport de contraste minimum 3:1 par rapport au fond dans les états ON et OFF.
• La navigation clavier (Tab, Espace, Entrée) bascule correctement l'état de l'interrupteur et met à jour aria-checked.
• La zone tactile est étendue à au moins 44x44px en utilisant un remplissage invisible ou des pseudo-éléments.
• L'interrupteur est associé à un texte d'étiquette visible et à contraste élevé via aria-labelledby.
• La position de l'interrupteur transitionne correctement (transform: translateX()) sur 150 ms–250 ms avec conformité prefers-reduced-motion.
• Les listes de paramètres responsives maintiennent un espacement correct (gap: 16px) sans chevauchement de texte sur les écrans mobiles étroits.