Groupes d’images
Conception avec des groupes d’images
Les groupes d’images représentent soit un élément d’information unique, comme une norme de classement par nombre d’étoiles, soit une collection d’images, comme une galerie.
Suivez les pratiques exemplaires suivantes pour ce qui a trait aux groupes d’images:
- Lorsqu’un groupe d’images représente un élément d’information unique: utiliser l’attribut
altet du texte de remplacement pour l’une des images, et utiliser l’attributaltnul (alt="") pour les autres images afin que la technologie d’assistance ne les prenne pas en charge. - Lorsqu’un groupe d’images représente une collection : Imbriquer chaque image dans un élément de
<figure>avec un élément enfant<figcaption>et imbriquer toutes les<figure>dans un élément de figure à parent unique. Utiliser l’élément<figcaption>pour décrire le contexte.
Bon exemple : Groupe d’images représentant un élément d’information unique
Une norme de classement par nombre d’étoiles consiste en une image qui montre 5 étoiles, mais dont le texte de remplacement ne doit communiquer qu’un seul message, soit le nombre d’étoiles sur 5.
L'exemple commence
Rating:
L'exemple finit
HTML
Début du code
Rating:
<img src="star-full.png" alt="3,5 étoiles sur 5">
<img src="star-full.png" alt="">
<img src="star-full.png" alt="">
<img src="star-half.png" alt="">
<img src="star-empty.png" alt="">
Fin du code
Bon exemple : Un groupe d’images représentant une collection
Une collection d’images peut être une galerie, auquel cas chaque image a besoin de son propre texte de remplacement, et le groupe lui-même a besoin d’un texte de remplacement.
Dans cet exemple, la <figure> contient l’élément <img>, et la <figcaption> fournit une légende pour chaque image d’une collection. L’élément <figure> peut être emboîté, le parent fournissant une légende pour toute la collection d’images.
L'exemple commence
L'exemple finit
HTML
Début du code
<figure>
<figcaption>
<strong>Les châteaux à travers les âges : 1423, 1756 et 1936</strong>
</figcaption>
<figure>
<img src="castle-etching.jpg" alt="Le château comporte une tour et un grand mur d’enceinte.">
<figcaption>Charbon sur bois. Anonyme, vers 1423.</figcaption>
</figure>
<figure>
<img src="castle-painting.jpg" alt="Le château compte maintenant deux tours et deux murs.">
<figcaption>Peinture à base d’huile sur toile. Eloisa Faulkner, 1756.</figcaption>
</figure>
<figure>
<img src="castle-fluro.jpg"alt="Le château est en ruines; la tour d’origine est le seul élément entier qui reste.">
<figcaption>Photographie analogique.. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption>
</figure>
</figure>
Fin du code
Les exemples sont tirés du document de l’Initiative d’accessibilité du Web (IAT) : Groupes d’images (IAT) (en anglais seulement) du tutoriel Concepts visant les images. Eric Eggert et Shadi Abou-Zahra, eds. Copyright © 2019 W3C® (MIT, ERCIM, Keio). Statut : Ébauche mise à jour le 27 juillet 2019.