Groups of Images

in Images Tutorial

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="").

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.

Back to Top