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 to describe the entire collection, while 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 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 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 (
A collection of images
In the example below, the HTML5
<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.
Related WCAG 2.0 resources
These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG 2.0 success criteria and techniques from different conformance levels: