If you have a number of related images (or other content) with caption text, you can use nested figure elements to associate both a group caption and an individual caption to each instance using the figcaption element.
Using nested figure elements is a useful method for grouping related content instances, such as images.
Examples are provided on a separate page: Use of nested figures
Recommended methods – grouped images
Examples of recommended methods for marking up groups of images which have associated captions:
How NOT TO markup groups of images with associated captions
DO NOT use the title attribute anti-pattern to caption the individual images within a figure.
An example of how not to mark up groups of images which have associated captions is provided in Example 3 – bad code example
Comments
Just landed through Twittert on this article and I really like this method of grouping related images and I thought it was not allowed according to the HTML5 spec to nest figure elements.
You say that the HTML5 specification recommends a bad method using the title attribute, but in what way is it bad… I see it looks messy compared to the clean nesting figure with figcaptions from you, but what’s the big advantage from an accesibility point of view to do it like example 1 & 2?
Sorry if I sound like a noob, but I am when it come to accesibility whith ARIA roles 🙂
Hi Ralph,
I provide information in the example notes: Using the title attribute for caption text results in keyboard only users and touch device users not being able to access the caption text. It is also problematic for screen magnifer users and people with cognitive impairments or fine motor skill impairments. This article on using the title attribute may be of help in understanding the issues.
Thanks for the explanation and sorry for not reading the notes well. I guess I went to fast to the antipattern link.
Glad I found your blog… seems like I can’t getting closer to usefull information regarding accesibility. Bookmarked!