coastdigitalgroup/coastai-skills

Système de Galerie d'Images et de Visionneuse Plein Écran

Objectif

Le Système de Galerie d'Images et de Visionneuse Plein Écran fournit une méthodologie de conception rigoureuse pour présenter des collections de médias sur le web. Il structure la manière dont un groupe d'images ou de vidéos est présenté dans une grille statique (la galerie) et comment ces éléments passent à un overlay plein écran à fort impact, sans distraction (la visionneuse). Ce système garantit que les portfolios visuels, les zooms de produits e-commerce et les études de cas restent hautement réactifs, maintiennent une conformité d'accessibilité approfondie (WCAG AA) et prennent en charge les appareils physiques via des gestes tactiles, des contrôles clavier et des pièges à focus.

Cas d'Utilisation

• Sites de portfolio présentant photographie, œuvres d'art, designs architecturaux ou études de cas.
• Pages de Détail Produit (PDP) e-commerce nécessitant une exploration détaillée d'images à grande échelle.
• Sites médias riches en contenu où les articles proposent des galeries de photos interactives.
• Pages d'événements et pages d'atterrissage marketing affichant des photos d'événements ou des journaux de témoignages.
• Sites immobiliers présentant des propriétés avec des visites intérieures et extérieures en haute résolution.

Quand NE PAS Utiliser

• Média Unique d'Arrière-plan ou en Ligne : Pour des images d'arrière-plan autonomes non groupées ou des schémas d'articles en ligne simples qui ne bénéficient pas d'un zoom ou d'une interaction de type carrousel.
• Vues de Tableaux de Bord à Forte Densité de Données : Lorsque la tâche principale consiste à trier ou analyser des points de données structurés (par exemple, tableaux ou graphiques) où un overlay plein écran interromprait l'espace de travail. Utilisez plutôt data-table-ui-system.
• Documents Complexes ou PDF : Lorsque les utilisateurs ont besoin de lire des documents texte de plusieurs pages ; les visionneuses sont optimisées pour les médias visuels, pas pour les actifs nécessitant une lecture intensive.
• Modales Contextuelles Indépendantes : Lorsque la boîte de dialogue contient des entrées de formulaire, des paramètres ou des applications interactives riches plutôt que des médias structurés. Utilisez overlay-and-dialog-system ou settings-interface-system à la place.

Entrées

1. Inventaire des Médias : Actifs sources en haute résolution et variantes de vignettes correspondantes en basse résolution ou compressées.
2. Métadonnées Contextuelles : Titres, descriptions, informations de droit d'auteur, légendes et texte alternatif (alt) d'accessibilité nécessaire.
3. Règles d'Espacement Réactif : Règles de gouttières de grille cibles, marges et colonnes de mise en page basées sur le responsive-grid-system et le fluid-spacing-system établis du site.
4. Palette de Contraste Interactif : Spécifications de couleurs accessibles pour le texte et les icônes (respectant le contraste minimum WCAG 4.5:1) pour les superpositions de contrôle, les boutons de fermeture et les points de pagination.

Sorties

1. Spécification de la Grille de Galerie : Définition des colonnes, des proportions d'image, des états de survol et des règles de préservation du point focal.
2. Plan d'Anatomie de la Visionneuse : Structure de l'overlay plein écran, détaillant les contrôles (Précédent, Suivant, Fermer), les positions des légendes et les dispositions des bandes de vignettes.
3. Spécification des Gestes et du Clavier : Matrice d'interaction complète mappant les événements clavier, les zones de tapotement tactile et les comportements de glissement/défilement.
4. Carte des Points de Repère d'Accessibilité : Rôles logiques (dialog, group), étiquettes (aria-label), règles de piégeage du focus et annonces d'état en temps réel.

Flux de Travail

1. Construire les Fondations de la Grille de Galerie

Commencez par structurer la galerie de la page principale pour équilibrer le balayage visuel et l'espace d'écran :

• Standardisation des Proportions : Regroupez les vignettes de la galerie en utilisant un rapport d'aspect uniforme (par exemple, 1:1 carré ou 4:3 standard) pour établir un rythme ordonné. Utilisez la propriété CSS aspect-ratio pour éviter les sauts de mise en page.
• Écarts et Gouttières : Utilisez les jetons du fluid-spacing-system (généralement --space-s ou --space-m) pour les écarts de grille.
• Affordances de Survól/Focus : Appliquez les conventions du interactive-state-system. Lorsqu'un utilisateur survole ou met le focus sur une vignette, déclenchez un changement visuel subtil (par exemple, mise à l'échelle, superposition de contraste douce, curseur de zoom/recherche personnalisé) pour signaler que l'élément est cliquable.
• HTML Sémantique : Structurez la galerie en utilisant un wrapper de liste (<ul> / <li>) avec des vignettes marquées comme éléments button (ou des liens si un indexage/ancrage profond est requis) pour garantir l'accessibilité au clavier.

2. Concevoir le Fond de la Visionneuse Plein Écran

Le fond de la visionneuse doit séparer le spectateur du reste de la page :

• Couche de Voile : Superposez un fond solide ou légèrement translucide (par exemple, #0a0a0a avec une opacité de 95% ou un flou d'arrière-plan sombre) pour éliminer les distractions périphériques.
• Préservation des Proportions : Positionnez l'image active au centre absolu de la zone d'affichage. Assurez-vous que le conteneur se redimensionne dynamiquement avec max-width: 90vw et max-height: 80vh pour s'adapter à n'importe quelle zone d'affichage sans recadrer ou rogner le rapport d'aspect source.
• État de Chargement : Construisez un indicateur visuel centré (spinner, squelette de chargement ou anneau de progression) qui soit conscient des attributs ARIA (aria-busy="true"), garantissant que les utilisateurs savent que les actifs haute résolution sont en cours de téléchargement.

3. Établir les Contrôles de Navigation et la Superposition de Légendes

Positionnez et stylisez les éléments de superposition pour optimiser l'ergonomie sur ordinateur de bureau et mobile :

• Cible de Fermeture : Positionnez le bouton Fermer dans le coin supérieur droit. Il doit avoir une limite visuelle claire, atteindre une taille de cible tactile minimale de 48x48px (ou 44x44px selon WCAG) et maintenir un anneau de focus clavier visible.
• Flèches Précédent et Suivant : Centrez les flèches de navigation verticalement sur les marges gauche et droite. Sur les appareils mobiles, masquez ces flèches ou insérez-les légèrement pour que l'attention reste entièrement sur les actions de glissement tactile.
• Légendes et Indicateur d'Index : Placez les légendes sémantiques et les index (par exemple, "Image 3 sur 12") en bas du conteneur. Utilisez un conteneur aria-live pour notifier les lecteurs d'écran des changements d'état lorsque l'index est mis à jour.
• Bande de Vignettes : Sous l'image principale, affichez une rangée défilable de petites vignettes. Mettez en surbrillance l'élément actif avec une bordure épaisse à contraste élevé et un contour :focus distinct.

4. Câbler les Mécaniques du Clavier et des Gestes

La visionneuse doit gérer l'interaction sur périphérique de bureau et sur geste mobile avec une élégance égale :

• Mappages Clavier : Assurez la prise en charge immédiate des touches de contrôle : Escape ferme la visionneuse, ArrowRight/ArrowDown déclenche "Suivant", et ArrowLeft/ArrowUp déclenche "Précédent".
• Piégeage du Focus : Lorsque la visionneuse s'ouvre, piégez le focus clavier à l'intérieur. Les utilisateurs ne doivent pas pouvoir tabuler vers la page d'arrière-plan. Le premier élément focalisé doit être le conteneur de dialogue principal ou le bouton Fermer.
• Restauration du Focus : Lorsque la visionneuse se ferme, restaurez immédiatement le focus sur le bouton de vignette spécifique qui l'a déclenchée.
• Navigation par Glissement : Prenez en charge les gestes tactiles fluides de glissement vers la gauche et vers la droite.
• Glissement pour Fermer : Permettez de faire glisser ou défiler verticalement (vers le haut ou vers le bas) pour fermer rapidement la visionneuse, reproduisant les modèles natifs des systèmes d'exploitation mobiles.

5. Finaliser l'Accessibilité et les Plans de Document

Appliquez des déclarations ARIA avancées pour garantir une expérience de lecteur d'écran conforme WCAG AA :

• Rôles et Étiquettes : Marquez le wrapper de la visionneuse avec role="dialog", aria-modal="true", et étiquetez-le en utilisant aria-label ou aria-labelledby en référençant le titre/légende.
• Occlusion de l'Arrière-plan : Lorsque la visionneuse est active, appliquez aria-hidden="true" au wrapper de la page principale (<main> ou #app-root) pour maintenir les balayages du lecteur d'écran isolés dans l'overlay.
• Mises à Jour en Direct : Assurez-vous que les changements de titre/légende de l'image sont annoncés en les plaçant à l'intérieur ou en les référençant via une zone aria-live="polite".

Règles de Décision

• La Séparation de Résolution : Les vignettes dans la grille de galerie doivent être fortement compressées et dimensionnées de manière appropriée (par exemple, largeur maximale de 600px). La visionneuse doit charger la variante maître haute résolution, mais uniquement à la demande (chargement paresseux des diapositives suivantes et précédentes) pour économiser la bande passante mobile.
• Priorisation Clavier vs. Tactile : Sur les écrans mobiles (largeurs < 768px), privilégiez l'espace d'écran pour l'image. Masquez les contrôles UI de bureau (flèches Suivant/Précédent) au profit des gestes de glissement tactile, mais gardez toujours un bouton "Fermer" hautement visible.
• Boucle Infinie vs. Arrêt Brusque :
  • Utilisez la Boucle Infinie (le carrousel revient à 1 après le dernier élément) lors de la présentation de portfolios créatifs, de témoignages ou de produits où un balayage fluide est préféré.
  • Utilisez l'Arrêt Brusque (flèche suivante désactivée sur le dernier élément) pour les tutoriels séquentiels pas à pas, les ensembles d'instructions ou les chronologies où la directionnalité est critique.
• Légendes vs. Espace de Superposition : Si une image a une longue description, ne la superposez pas sur l'image elle-même. Placez-la dans une barre inférieure dédiée en dessous des limites de l'image, permettant au texte de défiler indépendamment s'il dépasse l'espace d'écran vertical.
• Affordance du Curseur sur Bureau : Changez dynamiquement le curseur du bureau :
  • Survol des vignettes de la galerie : cursor: zoom-in
  • Image active de la visionneuse (zoomable) : cursor: zoom-in (un clic développe en pleine résolution, changeant le curseur en cursor: zoom-out pour le panoramique).
  • Survol du fond de la visionneuse : cursor: pointer (le clic ferme l'overlay).

Contraintes

• Réactivité : Les images ne doivent jamais se déformer ou perdre leur rapport d'aspect à l'intérieur de la visionneuse. Les conteneurs doivent utiliser des unités de zone d'affichage flexibles (vw/vh) et object-fit: contain en CSS pour rester strictement dans les limites de l'écran sur toutes les orientations d'appareil.
• Ratios de Contraste : Les contrôles interactifs de Fermeture, Navigation et Vignettes doivent respecter un ratio de contraste d'au moins 4.5:1 par rapport au fond et aux superpositions d'images.
• États de Focus : Chaque élément de navigation actif doit avoir un anneau :focus-visible visible. Les indicateurs de focus ne doivent jamais être coupés par des boîtes englobantes ou des éléments adjacents.
• Cibles Tactiles : Les cibles tactiles sur les appareils mobiles doivent respecter WCAG 2.2 SC 2.5.8 (au moins 24x24px, mais 44x44px est fortement recommandé pour les actions principales comme Fermer et Navigation).

Schémas d'Échec Courants

• "Le Piège de Tabulation Infini" : Tabuler hors de la visionneuse ouverte vers la page d'arrière-plan, ce qui amène les lecteurs d'écran à lire du contenu invisible et brise la navigation au clavier.
• "Le Débordement d'Image" : Les images de portrait hautes s'étendant au-delà du haut ou du bas de la zone d'affichage mobile, rendant les flèches de navigation ou les boutons de fermeture complètement inaccessibles.
• Perte du Point Focal : Les vignettes de la galerie statique recadrant le sujet principal (par exemple, la tête d'une personne) en raison d'un recadrage centré absolu. Résolvez en utilisant object-position ou un recadrage réactif personnalisé.
• "L'Échappatoire Morte" : Oublier de câbler la touche Escape, laissant les utilisateurs qui n'utilisent que le clavier coincés à l'intérieur de l'overlay modal sans moyen intuitif de le fermer.
• Décalage de Mise en Page à l'Ouverture : La barre de défilement du navigateur disparaissant lorsque la visionneuse s'ouvre, provoquant une gigue ou un décalage latéral de toute la mise en page de la page d'arrière-plan. Résolvez en ajoutant une gouttière correspondante ou un remplissage de verrouillage du défilement.
• Absence de Restauration du Focus : La fermeture de la visionneuse réinitialise le focus en haut du plan du site ou sur le corps, forçant les utilisateurs du clavier à tabuler à nouveau dans toute la navigation de l'en-tête pour revenir là où ils étaient.

Critères de Validation

• Les vignettes de la galerie utilisent un rapport d'aspect standardisé et ont des indicateurs de survol/focus clairs.
• Les images actives de la visionneuse conservent leur rapport d'aspect et s'adaptent parfaitement dans les limites de la zone d'affichage (max-width: 90vw et max-height: 80vh).
• Le bouton Fermer et les flèches respectent un ratio de contraste minimum de 4.5:1 par rapport à la couche d'arrière-plan.
• La navigation au clavier est active : Escape ferme, ArrowRight avance, ArrowLeft recule.
• Le focus est piégé à l'intérieur de la visionneuse lorsqu'elle est ouverte, et se restaure parfaitement à l'élément de galerie d'origine à la fermeture.
• Les gestes tactiles sont activés : glisser vers la gauche/droite pour naviguer, glisser vers le haut/bas pour fermer sur les écrans mobiles.
• Le wrapper de la page principale est marqué aria-hidden="true" lorsque la modale de la visionneuse est active.
• Un indicateur d'état de chargement (spinner) est visible et marqué aria-busy="true" lorsque les actifs haute résolution sont en cours de chargement.