A group of images is a collection of images being used to convey the same or similar pieces of information.
Tips for writing the alt text:
There are two different approaches to writing alt text for a group of images:
1) For a grouping of images that can be sufficiently described by one sentence: One of the images receives an alt text to describe the entire group, while the others receive an empty alt attribute.
2) For a grouping that requires a more robust description: The entire group needs a basic description of what the contents of the group are about. Then each individual image inside of the group needs to have its own description that explains the contents of that image.
Examples:
<div>
<img src="img/star-solid.svg" alt="Rating: 3 out of 5 stars" />
<img src="img/star-solid.svg" alt="" />
<img src="img/star-solid.svg" alt="" />
<img src="img/star-regular.svg" alt="" />
<img src="img/star-regular.svg" alt="" />
</div>
The above image is an example of the first approach explained above. One alt text is sufficient to describe the entire group. So, the alt text on the first star expresses the overall rating that the group visually displays, while the remaining four images receive an empty alt attribute.
<figure id="group" role="group" aria-labelledby="fig1">
<figcaption id="fig1">Impractical Jokers is a TV show on TruTV that features four
lifelong friends who compete to embarrass each other in various challenges, whoever
loses the most challenges every episode gets punished.</figcaption>
<figure role="group" aria-labelledby="fig11" class="figure">
<img src="img/murr.jpg" alt="Murr jumping out of a plane" />
<figcaption id="fig11">Murr is afraid of heights, so as a punishment,
the other guys made him go skydiving.</figcaption>
</figure>
<figure role="group" aria-labelledby="fig12" class="figure">
<img src="img/q.jpg" alt="A spider crawls on Q" />
<figcaption id="fig12">As Q's punishment, they tied him down and put huge
spiders on him.</figcaption>
</figure>
<figure role="group" aria-labelledby="fig13" class="figure">
<img src="img/sel.jpg" alt="Sal climbs down a manhole" />
<figcaption id="fig13">Since Sal is a huge germaphobe, the guys made him go
into the sewer system to fight "zombies".</figcaption>
</figure>
<figure role="group" aria-labelledby="fig14" class="figure">
<img src="img/joe.jpg" alt="Joe dressed as a genie" />
<figcaption id="fig14">Joe was attached to a harness and sent flying into
all the stage props throughout the entirety of the play.</figcaption>
</figure>
</figure>
This image is an example of the second approach described above. This four image group
Summary
An image being used to add a simple concept or piece of information to the content on the page is considered an informative image. Make your alt text as short and concise as possible and be sure to only include the most relevant information.
The decision of whether an image is a decorative image or an informative image can be a tricky one and is ultimately up to the person authoring the page. It comes down to the reason why the image is being included on the page, the content contained on the page, and what makes the most sense overall.
Top comments (0)