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 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 (
A collection of images
In the example below, the HTML5
<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,
aria-labelledby makes sure that the
figcaption elements are used as labels for the individual groups.
Note: The web browser and assistive technology support varies for this particular WAI-ARIA attribute and value.
Related WCAG 2.0 resources
The following WCAG 2.0 resources are directly related to this page. Relationship to WCAG 2.0 provides more background information.