Système de Curseur de Comparaison d'Images

Que fait Système de Curseur de Comparaison d'Images ?

Objectif

Le Système de Curseur de Comparaison d'Images fournit une méthodologie de conception systématique et spatiale pour construire des composants interactifs de comparaison visuelle « Avant et Après ». Ce système répond au défi de conception consistant à présenter deux états superposés d'une image (par exemple, restauration photo, étalonnage des couleurs, maquettes de design, changements environnementaux ou résultats médicaux) de manière à permettre aux utilisateurs de faire glisser, révéler et contraster les détails dynamiquement. Il prévient la désorientation visuelle, préserve la stabilité de la mise en page, garantit que les cibles tactiles sont optimisées pour le mobile et satisfait aux normes d'accessibilité WCAG AA grâce à des interactions clavier structurées et des annonces de lecteur d'écran.

---

Cas d'Utilisation

• Présentations de logiciels créatifs et de retouche : Comparaison de fichiers RAW non retouchés avec des photographies finales éditées, des préréglages d'étalonnage ou des travaux de retouche.
• Portfolios d'architecture et de design : Exposition des phases avant/après de construction, de projets de rénovation, de mise en scène intérieure ou de refonte de systèmes de design de sites web.
• E-commerce et démonstrations de produits : Présentation de produits dans différentes conditions (par exemple, test de tissu imperméable, protecteurs d'écran, produits de nettoyage ou comparaisons d'usure).
• Visualisations environnementales et scientifiques : Présentation des changements dans le temps, comme la cartographie satellitaire du recul des glaciers, l'expansion urbaine ou les projets de reboisement.
• Études de cas cosmétiques et médicales : Présentation de résultats de traitement haute fidélité dans des conditions d'éclairage et spatiales identiques.

---

Quand NE PAS Utiliser

• Découverte multi-éléments : Si vous devez comparer des attributs distincts de 2 à 5 produits différents, utilisez le système-de-matrice-de-comparaison.
• Grilles d'images générales : Pour un affichage d'images standard, des carrousels ou des galeries, utilisez le système-dimagerie-et-média ou le système-de-carrousel-et-curseur.
• Comparaisons textuelles : Si le contenu principal est du texte ou des données tabulaires (par exemple, fonctionnalités de version logicielle), utilisez le système-dinterface-de-tableau-de-données ou des éléments de liste <dl>.
• Changements subtils à faible contraste : Si les différences visuelles entre les deux images sont minimes et difficilement perceptibles, une disposition côte à côte ou empilée avec des légendes claires est plus utile.

---

Entrées

1. Actifs binaires principaux : Deux images de haute qualité (« Avant » et « Après ») prises exactement depuis la même perspective spatiale, le même cadre et la même résolution.
2. Dimensions du composant : Ratios d'aspect (par exemple, 16:9, 4:3 ou 1:1) et limites de la fenêtre d'affichage (issues du système-dimagerie-et-média).
3. Jetons de typographie et de marque : Tailles et couleurs de typographie pour les étiquettes, les poignées et les textes d'instruction (issus du système-de-typographie-fluide).
4. Préférences tactiles et de mouvement : Choix de l'utilisateur concernant les gestes tactiles et les états de mouvement réduit au niveau du système.

---

Sorties

1. Plan de l'anatomie du curseur : Définition de la mise en page spécifiant le conteneur, la piste de fond, la superposition clip-path, la barre de poignée, le pouce de préhension et les étiquettes d'état.
2. Spécification du contrôle clavier : Suivi coordonné accessible mappant des touches comme ArrowLeft, ArrowRight, Home et End à des pourcentages relatifs de clip-path.
3. Guide de comportement mobile et tactile : Spécifications précises pour les dimensions des cibles tactiles, les seuils de glissement par geste et l'espacement du pouce.
4. Règles de préservation de la mise en page : Règles structurelles (par exemple, préservation du ratio d'aspect et dimensions absolues) pour éviter le déplacement de mise en page (CLS).

---

Flux de Travail

1. Établir la Piste Spatiale et le Conteneur

Préserver le ratio d'aspect et l'alignement structurel :

• Verrouillage du ratio d'aspect : Le conteneur doit avoir un ratio d'aspect explicite (par exemple, aspect-ratio: 16 / 9 ou aspect-ratio: 1 / 1) pour réserver l'espace de mise en page et éviter le déplacement de mise en page cumulatif (CLS).
• Superposition en positionnement absolu : Définir le conteneur sur position: relative; overflow: hidden;. Placer l'image « Après » comme un bloc d'image de fond standard (width: 100%; height: 100%; object-fit: cover;).
• Bloc de superposition de clipping : Positionner l'image « Avant » dans un wrapper de superposition en positionnement absolu (position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;).
• Synchronisation des images : S'assurer que l'image de fond et l'image de superposition ont des dimensions identiques, des propriétés de mise à l'échelle (object-fit: cover) et des alignements (object-position: center) identiques afin qu'elles se superposent précisément.

2. Implémenter le Clip-Path de Révélation

Utiliser le clipping CSS moderne plutôt que le redimensionnement à double image pour éviter un décalage visuel :

• Valeur Clip-Path : Appliquer clip-path: inset(0 calc(100% - var(--ratio-exposition)) 0 0); au wrapper de superposition, où --ratio-exposition est une propriété personnalisée CSS (par exemple, 50%) représentant la position du curseur.
• Liaison de variable dynamique : Mettre à jour --ratio-exposition dynamiquement via les entrées souris, tactiles ou clavier.
• Éviter la distorsion des images : Ne pas redimensionner les images elles-mêmes lors du glissement ; ne clipser que le conteneur du wrapper. Les images doivent rester immobiles les unes par rapport aux autres.

3. Concevoir la Poignée et le Pouce Tactile

La poignée sert d'affordance visuelle principale pour l'interaction :

• Ligne de séparation verticale : Styliser une barre verticale positionnée de manière absolue à left: var(--ratio-exposition);. Définir la largeur sur une ligne fine à contraste élevé (par exemple, 2px à 4px) avec une ombre portée pour se détacher de divers arrière-plans d'images.
• Cible du pouce de préhension : Positionner un pouce de préhension circulaire ou arrondi centré sur la ligne verticale.
• Indicateurs visuels : Intégrer des flèches horizontales bidirectionnelles (← →) ou des textures contrastées à l'intérieur du pouce de préhension pour signaler les capacités de glissement horizontal.
• Taille de la cible tactile (WCAG 2.2 SC 2.5.8) : Le pouce de préhension interactif doit avoir une cible tactile physique d'au moins 44px x 44px sur les interfaces mobiles/tactiles, quelle que soit sa taille visuelle. Réaliser cela à l'aide de pseudo-éléments transparents (::after) ou de rembourrage.

4. Construire les Étiquettes Textuelles Accessibles

Maintenir le contexte et l'orientation de l'utilisateur :

• Placement des étiquettes textuelles : Positionner les étiquettes (par exemple, « AVANT » et « APRÈS ») dans les coins opposés du conteneur (par exemple, « Avant » en haut à gauche, « Après » en haut à droite).
• Conception à contraste élevé : Utiliser des fonds sombres semi-transparents (écrans) derrière les étiquettes de texte blanches pour garantir un rapport de contraste minimum de 4.5:1 (WCAG AA) quel que soit le contenu de l'image.
• Retour d'état interactif : Optionnellement, estomper les étiquettes de texte lorsque le curseur est actif pour minimiser la distraction visuelle, en les restaurant lorsque l'interaction se termine.

5. Définir la Navigation au Clavier et l'Intégration ARIA

L'interface doit être entièrement navigable au clavier seul :

• Support de curseur de plage : Soutenir la comparaison visuelle avec un élément <input type="range"> natif, visuellement caché. Cela fournit une gestion native de la plage, des états de focus et des rôles aria.
• Association d'attributs ARIA : Assigner aria-label (par exemple, « Comparaison d'images avant et après »), aria-valuemin="0", aria-valuemax="100" et aria-valuenow dynamique représentant le pourcentage.
• Mappage des événements clavier :
  • ArrowLeft / ArrowDown : Décrémenter la position de 1% (ou 5% pour un déplacement plus rapide).
  • ArrowRight / ArrowUp : Incrémenter la position de 1% (ou 5%).
  • PageUp / PageDown : Déplacer la position du curseur par incréments de 10%.
  • Home : Se déplacer immédiatement à 0% (révélant entièrement l'image « Après »).
  • End : Se déplacer immédiatement à 100% (révélant entièrement l'image « Avant »).
• Indicateurs de focus : Lorsque le curseur est focus, afficher un anneau de focus distinct à contraste élevé autour du pouce de préhension. Ne jamais masquer les styles de focus.

---

Règles de Décision

Sélection du Mode de Mouvement du Curseur

Mode d'interaction	Critères d'utilisation	Méthode d'implémentation
Clic/Appui & Glissement actif (Par défaut)	Comparaison de haute précision ; idéal pour une analyse détaillée.	Mettre à jour --ratio-exposition sur pointermove uniquement lorsque la souris/le toucher est enfoncé sur le pouce.
Suivi par survol	Comparaisons occasionnelles/exploratoires ; fonctionnalités de page d'accueil à faible friction.	Mettre à jour --ratio-exposition directement lorsque le curseur se déplace sur n'importe quelle partie du conteneur. Non adapté comme méthode unique ; un repli sur clic/glissement est requis pour le mobile.
Basculement double image (Clic n'importe où)	Comparaisons simples et rapides ; idéal sur petits écrans avec des changements visuels très distincts.	Un clic n'importe où sur le conteneur déclenche une transition entre 0% et 100% d'exposition avec un easing fluide de 0.3s.

---

Contraintes

• Accessibilité (WCAG AA) : Les étiquettes de texte doivent satisfaire au rapport de contraste 4.5:1. Le contrôleur interactif doit prendre en charge le focus clavier complet, des indicateurs visibles (:focus-visible) et des cibles tactiles de 44px x 44px minimum.
• Déplacement de mise en page cumulatif (CLS) : Les deux images et leur conteneur doivent partager exactement le même ratio d'aspect prédéfini. Ne jamais laisser le conteneur s'effondrer à une hauteur de 0px pendant le chargement des images. Utiliser aspect-ratio CSS ou des pourcentages de rembourrage en ligne.
• Fluidité responsive : Le composant doit se réduire dynamiquement aux fenêtres d'affichage mobiles. Sur les écrans < 480px, redimensionner les étiquettes proportionnellement ou les déplacer directement sous l'image pour éviter de chevaucher d'autres caractéristiques visuelles principales.
• Mouvement réduit : Si un utilisateur préfère un mouvement réduit (@media (prefers-reduced-motion: reduce)), désactiver les transitions fluides lorsque la navigation au clavier est utilisée, et éviter les déclencheurs de suivi par survol au profit d'actions explicites de clic/appui.

---

Schémas d'Échec Courants

• Le piège de « l'écrasement d'image » : Redimensionner ou étirer les images pendant l'interaction de glissement au lieu de les clipser, entraînant des visuels déformés.
• L'effondrement « Zero-CLS » : Ne pas définir les dimensions du conteneur, ce qui provoque un saut de mise en page important lorsque les images se téléchargent enfin.
• Exclusion clavier : Créer un curseur qui ne peut être glissé qu'avec une souris, le rendant totalement inutilisable pour les utilisateurs de clavier, de lecteur d'écran et de certains commutateurs d'assistance.
• Le « pouce invisible » sur les images claires : Ne pas ajouter d'ombre portée, de bordure ou de superposition à contraste élevé à la poignée et au pouce, ce qui les fait se fondre entièrement dans des images claires/chargées.
• Pièges de cible tactile : Rendre le pouce de préhension minuscule (par exemple, 10px de large) sans rembourrage tactile, provoquant une frustration massive de l'utilisateur sur les appareils mobiles.

---

Critères de Validation

• Alignement précis de la superposition : Les images « Avant » et « Après » sont parfaitement alignées sans décalage horizontal, écrasement ou distorsion pendant le glissement.
• Zéro déplacement de mise en page cumulatif : Le conteneur réserve l'espace de mise en page en utilisant un ratio d'aspect cohérent ou des dimensions explicites avant le chargement des images.
• Sécurité tactile mobile : La cible tactile de la poignée/pouce de préhension mesure au moins 44px x 44px sur les fenêtres d'affichage mobiles/tactiles.
• Navigabilité totale au clavier : Les utilisateurs peuvent naviguer, focus et ajuster la position du curseur en utilisant les touches standard du clavier (Flèches, Home, End).
• Conforme aux normes ARIA : Le contrôleur interactif utilise des éléments sémantiques (comme <input type="range">) ou des rôles ARIA corrects (role="slider", aria-valuenow, aria-label).
• Conformité au contraste AA : Les étiquettes de texte (« Avant » et « Après ») et les indicateurs de focus respectent le rapport de contraste WCAG de 4.5:1 par rapport aux surfaces adjacentes.
• Sensibilité au mouvement : Le comportement d'interaction respecte les préférences de l'utilisateur pour un mouvement réduit (prefers-reduced-motion: reduce).