Groups of Images

Sometimes groups of images are used together to represent one piece of information. For example, a collection of star icons that together represent a rating. In this case only one of the images needs a text alternative that describes the entire collection, and the other images have a null (empty) alt attribute so that they are ignored by assistive technology.

In other cases a group of images may represent a collection of related images. For example, showing a collection of art impressions that are thematically related. In this case each image needs its own text alternative that describes it individually, as well as its relationship within the group.

Multiple images conveying a single piece of information

This group of five images combined show 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="").

Example:

Rating: 3.5 out of 5 stars

Code snippet: 
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="">

A collection of images

In the example below, the HTML5 <figure> and <figcaption> elements are used to provide a caption for each individual 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.

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

Example:
The castle through the ages: 1423, 1756, and 1936 respectively.
The castle has one tower, and a tall wall around it.
Charcoal on wood. Anonymous, circa 1423.
The castle now has two towers and two walls.
Oil-based paint on canvas. Eloisa Faulkner, 1756.
The castle lies in ruins, the original tower all that remains in one piece.
Film photograph. Séraphin Médéric Mieusement, 1936.
Code snippet: 
<figure role="group">
	<figcaption>
		The castle through the ages: 1423, 1756, and 1966 respectively.
	</figcaption>


	<figure role="group">
		<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 role="group">
		<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 role="group">
		<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>

Techniques: