Groups of Images

Example 1: Multiple images conveying a single piece of information

This group of five images combined shows a product rating. There are five images (three filled stars, one half-filled star and one empty star) indicating the overall rating. The text alternative for the first image is “Rating: 3.5 out of 5 stars”. All other images have a null (empty) alt attribute (alt="").

Code

Rating:
<img src="star-full.jpg"  alt="3.5 out of 5 stars">
<img src="star-full.jpg"  alt="">
<img src="star-full.jpg"  alt="">
<img src="star-half.jpg"  alt="">
<img src="star-empty.jpg" alt="">

Example 2: A collection of images

In the example below, the HTML5 <figure> and <figcaption> elements are used to provide a caption for each image in a collection. The <figure> element can be nested, which is used in the example to provide a caption for the entire collection of images. The WAI-ARIA attribute role with the value of group is used to indicate this grouping to assistive technologies, aria-labelledby makes sure that the figcaption elements are used as labels for the individual groups.

Note: The web browser and assistive technology support vary for this particular WAI-ARIA attribute and value.

Code

<figure role="group" aria-labelledby="fig1">
  <figcaption id="fig1">
    The castle through the ages: 1423, 1756, and 1936 respectively.
  </figcaption>


  <figure role="group" aria-labelledby="fig11">
    <img src="castle-etching.jpg"
      alt="The castle has one tower, and a tall wall around it.">
    <figcaption id="fig11">Charcoal on  wood. Anonymous, circa 1423.</figcaption>
  </figure>

  <figure role="group" aria-labelledby="fig12">
    <img src="castle-painting.jpg"
      alt="The castle now has two towers and two walls.">
    <figcaption id="fig12">Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption>
  </figure>

  <figure role="group" aria-labelledby="fig13">
    <img src="castle-fluro.jpg"
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
    <figcaption id="fig13">Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption>
  </figure>

</figure>