Groups of images

Designing with groups of images

Groups of images represent either a single piece of information, such as a star rating, or a collection of images, such as a gallery.

Follow these best practices for groups of images:

• When a group of images represent a single piece of information: One image holds the message in its alt attribute, the other images use a null alt attributes (alt=""), ensuring assistive technology ignores the other images.
• When a group of images represent a collection: Nest each image in a <figure> element with a <figcaption> child element, and nest all the figures in a single parent <figure> element. Use its <figcaption> to describe the context.

Good example: A group of images representing a collection

A collection of images may be a gallery, in which case each image needs its own alt text and the group itself needs alt text.

In this example, the <figure> holds the <img> element and the <figcaption> provides a caption for each image in a collection. The <figure> element can be nested, with the parent providing a caption for the entire collection of images.

Example begins

Example ends

HTML

Code begins

<figure>
   <figcaption>
      <strong>The castle through the ages: 1423, 1756, and 1936 respectively.</strong>
   </figcaption>
   
   <figure>
      <img src="castle-etching.jpg" alt="The castle has one tower, and a tall wall around it.">
      <figcaption>Charcoal on  wood. Anonymous, circa 1423.</figcaption>
   </figure>
   <figure>
      <img src="castle-painting.jpg" alt="The castle now has two towers and two walls.">
      <figcaption>Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption>
   </figure>
   <figure>
      <img src="castle-fluro.jpg"alt="The castle lies in ruins, the original tower all that remains in one piece.">
      <figcaption>Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption>
   </figure>
</figure>

Code ends

Examples are from the Web Accessibility Initiative (WAI) document: Groups of Images (WAI) from the Images Concepts tutorial. Eric Eggert and Shadi Abou-Zahra, eds. Copyright © 2019 W3C® (MIT, ERCIM, Keio). Status: Draft Updated 27 July 2019.

Related WCAG resources