Galerie d'images : Ordre, légendes et règles mobiles

Une galerie d’images regroupe plusieurs images fixes apparentées en une seule unité éditoriale ordonnée. La séquence fait partie du sens : un lecteur doit comprendre pourquoi ces images vont ensemble, ce que chacune apporte, et si le passage de l’élément 1 à l’élément 2 représente le temps, la priorité, le point de vue ou un simple ordre de parcours.

Cet exemple utilise une grille éditoriale car les trois vues sont aussi importantes et tiennent sans masquer d’élément. L’ordre passe de l’identification à deux vérifications d’état. Les légendes indiquent ce que chaque vue prouve ; elles ne se contentent pas de répéter « image de connecteur ».

Pourquoi cet élément est important

Les gens examinent un ensemble différemment d’un tas. Une limite visible et une séquence délibérée indiquent au lecteur que les images répondent ensemble à une question plus vaste. La vue d’ensemble crée une orientation, puis les images de détail réduisent l’incertitude. Cette progression évite au lecteur d’ouvrir des images sans lien, de mémoriser leurs positions et de construire seul la relation.

L’ordre contrôle les attentes. Un ensemble chronologique promet un changement ; un ensemble produit promet une vue d’ensemble, une échelle, des caractéristiques, des variantes et l’état. L’ordre des noms de fichiers ou du téléchargement peut faire passer des preuves importantes au second plan ou suggérer un récit qui n’existe pas.

L’extractibilité automatique est la capacité d’un logiciel à isoler la galerie sans perdre la relation entre ses images. Une machine peut identifier des fichiers d’images séparés, mais elle ne peut pas déterminer de manière fiable s’il s’agit d’alternatives, d’étapes, de preuves ou de décoration. Un titre de galerie, une logique d’ordre déclarée, des positions d’éléments stables, un texte alternatif individuel et des légendes visibles fournissent cette relation sous forme textuelle. Ces mêmes champs peuvent alimenter l’indexation des recherches, les inventaires de contenu, les contrôles d’accessibilité et les données structurées sans recourir à la vision par ordinateur.

Les règles de rédaction des éléments communes régissent la préséance des éléments typés, les directives portables et le mappage du corps. Cette page prévaut pour les limites d’éléments, l’ordre, les légendes et le comportement mobile propres à la galerie d’images. N’imitez pas une galerie avec des images éparses ou un curseur générique lorsque l’objectif de cet élément s’applique.

Quand l’utiliser

Utilisez une galerie d’images lorsque deux images ou plus sont des équivalents qui répondent ensemble à une question mieux que séparément. Chaque image doit apporter une vue, un état, une étape, un détail ou un exemple distinct. Les cas pertinents incluent les vues de produit, les preuves avant-après, une courte séquence de processus, l’orientation d’un lieu, un portfolio de conception ou plusieurs détails soutenant une conclusion d’avis.

Appliquez le test de suppression à chaque élément. Si la suppression d’une image ne change rien à ce que le lecteur peut décider, vérifier ou comprendre, retirez-la de l’ensemble. Une galerie n’est pas une surface de stockage pour toutes les ressources disponibles.

Les cas proches nécessitent des éléments différents :

• Utilisez une figure unique ou une imagebox lorsqu’une seule image porte le propos et que le texte l’interprète.
• Utilisez une capture d’écran annotée lorsque les lecteurs doivent localiser plusieurs contrôles dans une seule image d’interface. Ne divisez pas un écran en une galerie de recadrages non expliqués.
• Utilisez un tableau comparatif lorsque le lecteur doit comparer des attributs répétés entre plusieurs options. Les images peuvent soutenir la décision, mais elles ne peuvent pas remplacer les critères textuels.
• Utilisez une liste d’étapes lorsque les actions sont le contenu principal. Une galerie peut montrer les états résultants, mais elle ne doit pas transformer des instructions nécessaires en légendes.
• Utilisez un curseur de produits lorsque chaque fiche comporte un prix, une disponibilité, une note et une action. Une galerie contient des images, pas des entités achetable.
• Utilisez des figures séparées lorsque les images soutiennent différentes sections et ne partagent aucune séquence significative.

Où le placer

Placez la galerie immédiatement après le paragraphe qui énonce la question à laquelle l’ensemble répondra. Une galerie d’état de produit suit l’affirmation sur l’état ; une séquence d’étude de cas suit l’intervention ; une galerie de lieu suit les informations d’arrivée.

Conservez le titre de la galerie, l’introduction facultative, tous les éléments, les légendes, les crédits et les contrôles dans un seul conteneur sémantique. N’insérez pas de texte, de publicité, d’appel à l’action ou de saut de page entre les éléments. Faites suivre la galerie de l’interprétation ou de la décision suivante lorsque les légendes ne la portent pas complètement.

Une galerie ne peut pas être placée directement à côté d’une autre galerie, d’une vidéo, d’un grand tableau, d’un graphique pleine largeur, d’une imagebox ou d’un appel à l’action sans lien. Ajoutez un texte explicatif entre les unités visuelles denses ou combinez des éléments véritablement apparentés.

Ne placez pas une galerie à l’intérieur d’une étape, d’un élément de liste, d’un encadré, d’une cellule de tableau, d’un accordéon, d’une carte cliquable ou d’une autre galerie. Ne séparez jamais une affirmation de sa source ni un avertissement de l’action qu’il limite. Réservez la première zone d’affichage à la réponse directe, sauf si les images constituent la réponse.

Anatomie

L’anatomie est sémantique. Les colonnes de grille, les tailles de vignettes, les ombres, les rayons de coins et les animations appartiennent au moteur de rendu plutôt qu’au modèle de contenu.

1. Conteneur de galerie : Regroupe le titre, la description, les éléments et les contrôles sous un nom accessible.
2. Titre de galerie : Énonce le sujet ou la question commune en 3 à 10 mots.
3. Introduction : Explique facultativement la séquence ou la tâche d’inspection en une phrase.
4. Élément ordonné : Préserve un ordre source stable, quelle que soit la disposition sur bureau.
5. Image : Utilise une ressource existante, aux droits libérés, avec une largeur et une hauteur intrinsèques.
6. Texte alternatif : Décrit l’objectif de cette image dans l’ensemble plutôt que de copier sa légende.
7. Légende : Identifie la vue et explique sa contribution distincte.
8. Crédit : Fournit les informations sur le créateur, la source ou la licence lorsque requis.
9. Contrôles : Pour une galerie interactive, des boutons visibles prennent en charge les entrées par pointeur, clavier, commutateur et tactile.
10. Indicateur de position : Annonce « 2 sur 5 » sous forme textuelle lorsque certains éléments sont masqués.
11. Ordre mobile : Correspond à l’ordre DOM, à la numérotation, à l’ordre du clavier et au récit prévu.

Exemples de conception

Choisissez la variante la moins interactive qui préserve la relation. Chaque variante conserve les légendes complètes disponibles sous forme textuelle et utilise le même ordre source à chaque point de rupture.

Grille éditoriale

Utilisez une grille pour 2 à 6 images de poids égal pouvant apparaître ensemble. Le bureau peut utiliser deux ou trois colonnes. Le mobile se réduit à une colonne ; il ne réduit jamais trois images en vignettes illisibles.

Bande séquentielle

Utilisez une bande pour 3 à 8 images avec une progression chronologique ou spatiale explicite. Sur écran étroit, elle peut devenir une zone défilable horizontalement uniquement si des contrôles visibles, un indicateur de position, un fonctionnement au clavier et une solution de repli empilée sans JavaScript existent. Ne faites jamais du balayage le seul moyen de navigation.

Paire de comparaison

Utilisez exactement deux images pour l’avant-après, l’original-révisé, ou deux points de vue qui doivent être jugés ensemble. Utilisez des étiquettes textuelles persistantes, pas seulement la couleur ou la position. Le mobile empile l’élément 1 avant l’élément 2 et répète les étiquettes à côté des images.

Image principale avec vues de détail

Utilisez cette variante pour 3 à 12 vues de produit ou d’artefact lorsqu’une vue d’ensemble ancre l’ensemble et que les images restantes répondent à des questions d’inspection distinctes. La sélection d’une vignette doit mettre à jour le texte alternatif, la légende, la position et l’état annoncé de l’image principale. Chaque image reste accessible sans JavaScript.

Pile mobile par défaut

Utilisez la liste empilée chaque fois que l’interactivité n’améliorerait pas matériellement la compréhension. C’est la valeur par défaut pour le contenu éditorial car tous les éléments et légendes restent visibles, accessibles par lien, imprimables et lisibles sans gestes.

Paramètres

Le contrat stocke la signification éditoriale et les métadonnées des ressources. Les jetons de disposition, les largeurs de colonnes, les espacements, les icônes de contrôle, la durée de transition et les points de rupture appartiennent au moteur de rendu.

Les légendes sont requises pour les preuves, l’ordre modifiant le sens, les étiquettes de comparaison et les informations de droits visibles. Un angle de produit peut en omettre une uniquement si son texte alternatif et son contexte distinguent la vue. mobile=scroll n’est valide que pour strip ou primary-details avec les contrôles requis.

Syntaxe et exemples de code

Tous les mappages préservent le même titre, le même ordre, les mêmes champs d’élément et la même solution de repli. La production doit rejeter les chemins d’exemple tant que les fichiers n’existent pas.

Directive Markdown portable

:::image-gallery{layout=grid mobile=stack orderedBy=viewpoint}
## Trois vues qui établissent l'état du produit

:::gallery-item{src="/cdn-assets/examples/connector-overview.webp" alt="Connecteur industriel noir complet sur une surface neutre, orienté avec sa patte de verrouillage vers le haut" width=1600 height=1200}
**1. Vue d'ensemble.** Le connecteur complet établit la forme, l'échelle et l'orientation.
:::

:::gallery-item{src="/cdn-assets/examples/connector-lock.webp" alt="Vue rapprochée du connecteur montrant une patte de verrouillage surélevée intacte sans fissure visible" width=1600 height=1200}
**2. Patte de verrouillage.** La vue rapprochée confirme que le clip de retenue est intact.
:::
:::

Le premier titre devient title ; le corps de chaque élément devient sa légende. L’ordre source est canonique, donc la disposition en maçonnerie ne peut pas réordonner les éléments pour combler les espaces.

Mappage de shortcode Hugo

{{< image-gallery layout="grid" mobile="stack" orderedBy="viewpoint" >}}
## Trois vues qui établissent l'état du produit

{{< gallery-item src="/cdn-assets/examples/connector-overview.webp" alt="Connecteur industriel noir complet sur une surface neutre, orienté avec sa patte de verrouillage vers le haut" width="1600" height="1200" >}}
**1. Vue d'ensemble.** Le connecteur complet établit la forme, l'échelle et l'orientation.
{{< /gallery-item >}}

{{< gallery-item src="/cdn-assets/examples/connector-lock.webp" alt="Vue rapprochée du connecteur montrant une patte de verrouillage surélevée intacte sans fissure visible" width="1600" height="1200" >}}
**2. Patte de verrouillage.** La vue rapprochée confirme que le clip de retenue est intact.
{{< /gallery-item >}}
{{< /image-gallery >}}

Cette spécification d’adaptateur n’est pas un shortcode enregistré. En attendant l’approbation, utilisez des figures sémantiques dans l’ordre source et ne référencez pas de ressources manquantes.

Bloc WordPress

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">Trois vues qui établissent l'état du produit</h2>
  <ol>
    <li><figure><img src="connector-overview.webp" width="1600" height="1200" alt="Connecteur industriel noir complet sur une surface neutre, orienté avec sa patte de verrouillage vers le haut"><figcaption><strong>Vue d'ensemble.</strong> Le connecteur complet établit la forme, l'échelle et l'orientation.</figcaption></figure></li>
    <li><figure><img src="connector-lock.webp" width="1600" height="1200" alt="Vue rapprochée du connecteur montrant une patte de verrouillage surélevée intacte sans fissure visible"><figcaption><strong>Patte de verrouillage.</strong> La vue rapprochée confirme que le clip de retenue est intact.</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

Une implémentation WordPress peut utiliser un bloc Galerie natif uniquement s’il préserve le texte alternatif, les légendes, les dimensions intrinsèques, l’ordre source et le nom de groupe accessible par élément. Styliser une séquence d’images d’arrière-plan ne satisfait pas au contrat.

Exemples

Bon : chaque vue résout une incertitude différente

État d’équipement d’occasion — ordre d’inspection

1. Unité complète : Établit l’identité et montre que le boîtier est complet.
2. Plaque signalétique : Confirme le modèle exact et la tension nominale avec une mise au point lisible.
3. Connecteur d’alimentation : Montre des broches droites et une patte de verrouillage intacte.
4. Surface d’usure : Montre la rayure la plus profonde visible à côté d’une règle pour l’échelle.

Cela suit la logique d’inspection de l’acheteur. Chaque légende est vérifiable, la règle empêche un gros plan d’exagérer les dommages, et la pile mobile préserve l’ordre.

Mauvais : un carrousel utilisé comme dépotoir de ressources

Notre dernier événement Douze photographies de scène quasi identiques, sans légendes, avancement automatique toutes les quatre secondes. La navigation n’apparaît qu’au survol. La version mobile montre une tranche centrale recadrée et n’accepte que les gestes de balayage.

Ni l’appartenance ni l’ordre n’ont de raison d’être. Douze noms de fichiers ne transmettent rien à un lecteur d’écran ; l’avancement automatique empêche l’inspection ; les contrôles visibles uniquement au survol excluent les utilisateurs de clavier et tactiles ; la navigation uniquement par balayage masque l’accès ; et le recadrage peut supprimer le sujet. Sélectionnez les quelques plans qui racontent une histoire définie, rédigez des alternatives et des légendes distinctes, arrêtez le mouvement automatique et optez par défaut pour une pile mobile.

Balisage de schéma et accessibilité

Une galerie n’obtient pas automatiquement un traitement spécial dans les recherches. Balisez uniquement les relations que la page visible et les ressources soutiennent. Les images porteuses de sens peuvent correspondre à ImageObject avec des contentUrl, légendes, créateur ou texte de crédit, informations de licence et statut représentatif stables lorsque ces faits sont connus. Une galerie explicitement ordonnée peut correspondre à ItemList, en utilisant des valeurs position qui correspondent à l’ordre source. Les vues de produit peuvent alimenter la propriété Product.image du parent. Ne créez pas d’entités pour les images décoratives, n’inventez pas de licences et ne prétendez pas que chaque image est représentative.

Utilisez des éléments <img> natifs à l’intérieur d’éléments <figure> avec <figcaption> visible lorsque requis. Nommez la section via son titre. Préservez les relations ordonnées avec <ol> ou des sémantiques de position équivalentes ; le placement visuel ne remplace jamais l’ordre DOM.

Le texte alternatif décrit l’objectif de chaque image dans cet ensemble. Il ne doit pas commencer par « image de », répéter textuellement la légende ou décrire des détails non pertinents pour la décision. Deux photographies du même objet nécessitent un texte alternatif différent car chacune a un objectif différent. Utilisez alt="" uniquement lorsqu’une image est véritablement redondante et que sa suppression ne retirerait pas de preuve.

Les variantes interactives nécessitent des boutons nommés précédent et suivant, une activation au clavier, un indicateur de position textuel et une annonce d’état après les modifications. L’avancement automatique est interdit. Maintenez le focus sur le contrôle activé et préservez le contenu sans JavaScript, à 200 % de zoom et avec mouvement réduit.

Règles de rédaction

Chaque galerie répond à une question commune. Indiquez pourquoi elle existe, puis ordonnez par récit, chronologie, priorité, point de vue ou comparaison — jamais par ordre de téléchargement.

• Utilisez 2 à 8 éléments pour une galerie normale ; utilisez exactement 2 pour une comparaison et 3 à 12 pour un ensemble produit/détail principal.
• Rédigez les titres en 3 à 10 mots et les introductions facultatives en une phrase de 8 à 30 mots.
• Limitez les légendes à 5 à 30 mots. Commencez par la vue, l’état ou l’étiquette d’élément lorsque cela améliore le balayage visuel, puis expliquez sa contribution.
• Utilisez une structure de légende parallèle dans tout l’ensemble. Si la première commence par une étiquette d’état, les autres devraient aussi.
• Concentrez le texte alternatif sur ce dont un lecteur non visuel a besoin à partir de ce plan spécifique ; visez 40 à 180 caractères et ne dépassez jamais 250.
• Adoptez un ton factuel et observationnel. Dites « le joint affleure » plutôt que « le joint incroyable semble parfait ».
• Identifiez le temps, l’échelle, le recadrage, l’état et la source chaque fois qu’ils contraignent l’interprétation.
• Utilisez les mêmes conditions de comparaison lorsque l’apparence est une preuve : recadrage, angle, échelle, éclairage et traitement des couleurs équivalents.

Ne mettez jamais de titre, paragraphe, tableau, liste d’instructions, appel à l’action, formulaire, prix, note, témoignage, contenu déroulant, vidéo, lecteur audio ou fiche produit dans une légende d’élément. N’incorporez jamais les légendes dans les pixels, ne faites pas de la couleur le seul indicateur, ne masquez pas les défauts matériels par le recadrage, n’exposez pas les données client et ne publiez pas d’image sans droits d’utilisation confirmés.

Types de publications qui l’utilisent

Les lignes ci-dessous reflètent le frontmatter postTypes. L’inclusion signifie que le type de publication peut utiliser une galerie lorsque les images forment un véritable ensemble ; cela ne rend pas l’élément obligatoire sur chaque page.

Liste de contrôle QA

• Le titre énonce une question ou un sujet commun, et chaque image apporte une réponse distincte.
• Le nombre d’éléments correspond à la variante sélectionnée et ne contient aucun plan redondant.
• orderedBy enregistre un ordre de récit, chronologie, priorité, point de vue ou comparaison défendable.
• Les ordres source, visuel, clavier, lecteur d’écran, numérotation et mobile correspondent tous.
• Chaque src pointe vers une image fixe existante, aux droits libérés, avant publication.
• Chaque image a une largeur et une hauteur intrinsèques, une valeur alt intentionnelle et un recadrage pertinent.
• Les preuves, comparaisons et éléments ordonnés ont des légendes visibles concises avec une structure parallèle.
• Les crédits et les liens de licence sont visibles et exacts lorsque requis.
• Les images de comparaison utilisent une échelle, un angle, un recadrage, un éclairage et des étiquettes équivalents, sauf si une différence est divulguée.
• Le mobile utilise une solution de repli empilée lisible ou des contrôles accessibles complets ; le balayage n’est jamais la seule entrée.
• Les variantes interactives ont des boutons précédent et suivant visibles, un indicateur de position textuel, un support clavier et aucun avancement automatique.
• La galerie fonctionne sans JavaScript et à 200 % de zoom, respecte le mouvement réduit et ne crée pas de débordement de page horizontal.
• La première image importante n’est pas différée, les états de chargement ultérieurs sont annoncés et un espace réservé empêche le déplacement de la mise en page.
• Aucune instruction, nombre, avertissement, étiquette ou conclusion essentiel n’existe uniquement dans les pixels.
• La galerie ne contient ni vidéo, ni fiche produit, ni formulaire, ni prix, ni note, ni témoignage, ni appel à l’action.
• Les données structurées correspondent à l’ordre visible, aux légendes, aux droits et aux relations d’entité sans traiter la décoration comme du contenu.
• Les mappages Markdown portable, Hugo et WordPress préservent les mêmes champs, l’ordre des éléments et le sens.

FAQ

Le modèle academy affiche les cinq questions révisées stockées dans le frontmatter [[faq]] de cette page. Elles couvrent le nombre d’éléments, les carrousels mobiles, le texte alternatif et les légendes, le contenu mixte interdit et les données structurées.

La réussite signifie qu’un lecteur peut expliquer la relation entre les images et la contribution de chaque élément. Sans ordre pertinent, légendes distinctes et chemin mobile accessible, l’ensemble est une liste de ressources plutôt qu’une galerie.