Système de Contrôle Segmenté

Que fait Système de Contrôle Segmenté ?

Objectif

Le Système de Contrôle Segmenté fournit une méthodologie de conception pour des sélecteurs compacts à mutuelle exclusivité (également appelés Groupes de Boutons, Bascules Coulissantes ou Boutons Segmentés). Contrairement aux menus de navigation ou aux onglets de contenu, un contrôle segmenté sert de modificateur en ligne dans un contexte ou un formulaire unique. Il permet aux utilisateurs de modifier immédiatement le format d'affichage, de filtrer un seul jeu de données ou de sélectionner une option de saisie dans un espace spatial très contraint.

Une approche systématique garantit que ces contrôles ont une relation visuelle cohérente, des affordances interactives claires, une mise à l'échelle de disposition fluide et des motifs d'accessibilité sémantique appropriés pour éviter qu'ils ne soient confondus avec des boutons génériques ou une navigation par onglets.

Cas d'Usage

• Changement de Vue : Basculer la présentation d'affichage d'un contenu identique (par ex., "Grille vs. Liste vs. Carte" ou "Tableau vs. Calendrier").
• Bascules de Prix et Facturation : Choisir des fréquences de facturation (par ex., "Mensuel vs. Annuel") modifiant directement les affichages de prix.
• Micro-filtrage / Sous-segmentation : Filtrer une liste active dans une sous-catégorie spécifique (par ex., messages "Tous vs. Non lus vs. Favoris").
• Sélection d'Option en Ligne : Remplacer les menus déroulants volumineux dans les formulaires pour 2 à 5 choix de haute priorité (par ex., "Petit vs. Moyen vs. Grand").
• Changeurs d'État Interactifs : Modifier un paramètre métrique actif dans des graphiques en direct (par ex., périodes "7J vs. 30J vs. 1A").

Quand NE PAS Utiliser

• Navigation de Page Complète : Si cliquer sur un élément change l'URL de la page ou éloigne l'utilisateur du contexte de vue actuel, utilisez système-de-navigation-site.
• Grand Changement de Panneau de Contenu : Si la commutation d'options affiche des blocs de contenu complètement différents avec des mises en page complexes (comme des panneaux de paramètres ou des onglets de documents), utilisez système-d-onglets-ui.
• Nombre Élevé d'Options : S'il y a plus de 5 options, utilisez une sélection déroulante ou un tiroir de filtre pour éviter l'encombrement visuel et le débordement de texte horizontal.
• Paramètres Multi-sélection : Si les utilisateurs peuvent sélectionner plus d'une option active simultanément, utilisez des cases à cocher groupées ou des badges (système-de-badges-et-étiquettes).
• Bascules Binaires Dynamiques : Pour les paramètres marche/arrêt uniques qui déclenchent un processus en arrière-plan immédiat (par ex., "Activer les notifications"), utilisez un Interrupteur à Bascule standard (implémentation-interrupteur-accessible).

Entrées

1. Inventaire des Options : La liste des étiquettes, icônes ou valeurs mutuellement exclusives (généralement 2 à 5 éléments).
2. Portée du Contrôle : Que le contrôle agisse comme une entrée de formulaire, un modificateur de vue de mise en page ou un changeur de métrique.
3. Contraintes du Conteneur : La largeur exacte et l'environnement de mise en page (par ex., en ligne à côté d'une recherche, centré dans des cartes de prix, ou pleine largeur sur mobile).
4. Jetons de Style : Échelle typographique, variables d'espacement (système-d-espacement-fluide), états interactifs (système-d-états-interactifs) et jetons de couleur.

Sorties

1. Spécification d'Anatomie du Contrôle : Définition visuelle de la Piste (le conteneur d'arrière-plan), des Segments (boutons individuels) et de l'Indicateur Actif (l'arrière-plan coulissant ou surligné).
2. Mappage ARIA Comportemental : Sélection des rôles ARIA corrects (role="radiogroup" vs. role="tablist") et règles de navigation au clavier.
3. Matrice de Transition d'État : Définitions de style pour les états Par défaut, Survol, Actif/Sélectionné, Focus et Désactivé.
4. Règles de Flux Responsive : Spécifications pour la mise à l'échelle horizontale, le comportement fluide pleine largeur et le reflow mobile ou le repli vers <select>.

Workflow

1. Identifier l'Intention Sémantique

Déterminez si le contrôle modifie une valeur ou modifie une vue d'affichage :

• Entrée de Formulaire ou Micro-filtre : Agit sémantiquement comme un Groupe de Radio. Il modifie une valeur stockée ou envoyée lors de la soumission, ou refiltre immédiatement une liste en ligne.
• Contrôleur de Vue : Agit sémantiquement comme une Liste d'Onglets. Il bascule le panneau visible actif ou la présentation dans le même conteneur.

2. Concevoir l'Anatomie Visuelle

Construisez un composant visuel hautement soigné et unifié. La conception se compose de trois couches principales :

• La Piste : Un conteneur horizontal unique avec une couleur d'arrière-plan subtile (par ex., gris faible contraste), un petit rembourrage (généralement 2px à 4px) et des coins arrondis (semi-arrondis ou pilule).
• Les Segments : Boutons placés côte à côte à l'intérieur de la Piste. Ils doivent partager une largeur égale (justifiée) ou s'adapter à la largeur du contenu avec un rembourrage cohérent.
• L'Indicateur Actif : Une carte physique coulissante ou un surlignage avec un arrière-plan distinct (souvent blanc ou couleur de thème primaire) et une ombre subtile (système-d-élévation-et-profondeur) qui se place sous le texte actif pour le soulever visuellement.

3. Établir la Chorégraphie d'État et de Mouvement

Configurez un retour visuel distinct pour chaque phase d'interaction :

• État Par défaut : Le texte non actif utilise une couleur neutre secondaire avec un rapport de contraste suffisamment élevé (au moins 4,5:1).
• État de Survol : Un surlignage d'arrière-plan subtil sur le segment cible pour indiquer la cliquabilité.
• État Sélectionné : Le texte passe en style primaire/gras, et l'Indicateur Actif glisse derrière lui.
• État de Focus : Lors de la navigation au clavier, dessinez un contour de focus distinct et à haut contraste autour du segment actif. L'indicateur de focus ne doit pas dépasser la limite de la Piste.
• État Désactivé : Opacité atténuée (généralement 40 %) avec curseur de pointeur désactivé.

4. Annotations de Code et de Remise

Annotez les exigences structurelles pour l'implémentation :

• Distribution à Largeur Égale : Spécifiez l'alignement flexbox (flex: 1 1 0%) pour répartir les segments également le cas échéant.
• Transition de l'Indicateur Coulissant : Spécifiez les règles de transition CSS (transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)) pour la carte d'indicateur actif coulissante, en veillant à ce qu'elle ne déclenche pas de Cumulative Layout Shift (CLS) en utilisant des propriétés accélérées par le matériel (transform et opacity au lieu de modifier directement les propriétés left/width).

5. Planifier les Comportements Responsives

Définissez comment le contrôle segmenté se réduit sur les petits écrans :

• Justification Fluide : Étendez la Piste et les Segments pour occuper 100 % de la largeur sur les écrans mobiles, agissant comme une barre inférieure ou un composant d'en-tête pleine largeur.
• Troncature d'Étiquette et Largeur Minimale : Appliquez des largeurs minimales strictes pour les segments afin d'empêcher les retours à la ligne de texte d'empiler les lignes à l'intérieur d'un bouton.
• Repli du Débordement vers un Menu Déroulant : Si les options ne peuvent pas tenir dans une fenêtre de 320px sans rupture visuelle, remplacez la disposition du contrôle segmenté par un menu déroulant <select> natif à l'aide de requêtes média CSS responsives.

Règles de Décision

Modèle Radio Group vs. Tablist

Critère	Utiliser le modèle Radio Group (role="radiogroup")	Utiliser le modèle Tablist (role="tablist")
Fonction Principale	Modifie une propriété de donnée ou filtre une liste en ligne.	Bascule entre des vues ou panneaux de mise en page distincts.
Intégration Formulaire	Intégré dans un <form> ou agit comme une entrée.	En dehors des formulaires standards ; gère les modes de vue de mise en page.
Rôle ARIA	Parent : role="radiogroup", Enfant : role="radio" avec aria-checked="true/false".	Parent : role="tablist", Enfant : role="tab" avec aria-selected="true/false".
Navigation Clavier	Les touches fléchées déplacent la sélection immédiatement ; Tab quitte le groupe.	Les touches fléchées déplacent le focus immédiatement ; Espace/Entrée active.

Disposition Visuelle : Largeur Égale Fixe vs. Largeur Fluide Automatique

• Largeur Égale Fixe : Idéal pour les étiquettes courtes et uniformes (par ex., "7J", "30J", "90J" ou "Grille", "Liste"). Chaque segment a une largeur identique, offrant une symétrie visuelle.
• Largeur Fluide Automatique : Idéal lorsque les étiquettes diffèrent considérablement en longueur de caractères (par ex., "Tous les Éléments" vs. "En Attente de Vérification"). Chaque segment s'enroule autour de son texte avec un rembourrage cohérent (par ex., 12px 16px).

Contraintes

• Ratios de Contraste : Les segments de texte actifs et inactifs doivent respecter le rapport de contraste minimum WCAG AA de 4,5:1 par rapport à leur arrière-plan.
• Dimensions des Cibles Tactiles : Chaque segment individuel doit fournir une zone interactive minimale de 24x24px (WCAG 2.2 SC 2.5.8), mais une hauteur minimale de 40px à 44px est fortement recommandée pour des appuis tactiles fluides sur mobile.
• Indicateurs de Focus : Le focus clavier doit être clairement visible sur le segment actuellement sélectionné ou la cible de focus active. Assurez-vous que les anneaux de focus ne se coupent pas ou ne se cachent pas derrière les segments adjacents.
• Pas de Retour à la Ligne du Texte : Le texte du segment doit être sur une seule ligne et ne doit jamais passer à plusieurs lignes à l'intérieur d'un bouton. Cela brise le rythme vertical et provoque un chevauchement visuel.
• Mouvement Réduit : Si des indicateurs coulissants animés sont implémentés, respectez les préférences du système d'exploitation de l'utilisateur via @media (prefers-reduced-motion: reduce) en désactivant l'effet de glissement et en basculant instantanément l'opacité ou les surlignages de contour à la place.

Schémas d'Échec Courants

• Le Décalage de Mise en Page (CLS) : Changer le segment actif modifie la largeur du bouton actif, provoquant un saut des éléments adjacents vers la gauche ou la droite.
• L'Erreur de Navigation : Styliser la navigation globale de page majeure pour ressembler à des contrôles segmentés, ce qui déroute les utilisateurs qui s'attendent à des changements de contenu instantanés dans la page.
• Affordance de Sélection Manquante : Utiliser uniquement un changement subtil de poids de police ou un indicateur à faible contraste, rendant difficile pour les utilisateurs malvoyants d'identifier quelle option est sélectionnée.
• Piège Clavier : Ne pas lier les touches fléchées standard du clavier à l'intérieur du contrôle, forçant les utilisateurs uniquement au clavier à appuyer sur Tab pour chaque option individuellement.
• Écrasement Mobile : Permettre à un contrôle à 4 segments de rétrécir sur mobile jusqu'à ce que les étiquettes se chevauchent, soient tronquées de manière illisible ou se coupent en dehors des limites de la Piste.

Critères de Validation

• Un motif ARIA sémantique clair est choisi en fonction de la fonction du contrôle (Radio Group vs. Tablist).
• Les segments individuels respectent la taille minimale de cible tactile de 24x24px (44px préféré sur mobile).
• Les contrastes de texte inactif et actif sont conformes WCAG AA (>= ratio 4,5:1).
• L'indicateur actif utilise des propriétés CSS accélérées par le matériel (transform) pendant les transitions de glissement pour empêcher le Cumulative Layout Shift (CLS).
• Le comportement responsive est défini (justification fluide, largeur minimale ou repli du menu déroulant).
• Le texte à l'intérieur des segments reste sur une seule ligne sans retour à la ligne vertical ni coupure.
• Le repli de transition @media (prefers-reduced-motion: reduce) est explicitement géré.