How to use nested figure elements
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:
Example 1. Code using nested figure elements:
Notes
- The group
figcaptionis placed at the top of the groupfigure. - Each image is in a nested
figurewith an associatedfigcaptionbelow the image. - The name of the photographer in the third caption is French, as the caption text is contained with the
figcaptionelement the name can be marked up using thelangattribute to indicate it is to be pronounced differently from the rest of the text in the page. - The ARIA role=”group” is used to indicate the semantics of the
figureand the labelling relationship offigcaptionto assistive technologies. Refer to the Firefox implementation bug: Implement figure and figcaption accessibility for more details.
<figure role="group">
<figcaption>The castle through the ages: 1423, 1756, and 1966 respectively.</figcaption>
<figure role="group">
<img src="castle-etching.jpg" alt="The castle has one tower, and a tall wall around it.">
<figcaption>Charcoal on wood. Anonymous, circa 1423.</figcaption>
</figure>
<figure role="group">
<img src="castle-painting.jpg" alt="The castle now has two towers and two walls.">
<figcaption>Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption>
</figure>
<figure role="group">
<img src="castle-fluro.jpg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption>
</figure>
</figure>
Example 1. Display using nested figure elements:
Notes
- Placement of the group caption at the top of the containing
figuremeans users will encounter it first as the navigate through the content. - Nesting of
figureelements provides a richer more granular content structure. - Use of the
figcaptionto mark up each caption means that caption texts are visible to all users by default and additional semantic markup can be added to the caption text if required.
Example 2: Using nested figure elements and CSS to show/hide caption information.
Notes:
It may be a requirement for visual design that the caption text is not always visible. This can be achieved through the use of some additional markup and CSS to hide/show the caption text on hover or focus.
caption Charcoal on wood. Anonymous, ca. 1423.caption Oil-based paint on canvas. Eloisa Faulkner, 1756.caption Film photograph. Séraphin Médéric Mieusement, 1936.
How NOT TO markup groups of images with associated captions
The HTML5 specification does not currently provide an example of using nested figure elements to mark up a group of images and their captions. Instead it promotes the use of 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
Example 3. A version of the original example code from the HTML5 specification of a figure containing multiple images:
Notes:
- DO NOT markup multiple images inside a single
figureusing thetitleattribute to provide a caption for individual images. - Using the title attribute in this way is an anti-pattern that hides content from keyboard and touch interface users and it is an ambiguous semantic container for plain text only.
- Caption text in the title attribute cannot be marked up for changes in language or emphasis or any other semantic properties it may include.
<!-- THIS IS BAD CODE DO NOT USE IT -->
<figure>
<img src="castle1423.jpeg" title="Charcoal on wood. Anonymous, circa 1423."
alt="The castle has one tower, and a tall wall around it.">
<img src="castle1858.jpeg" title="Oil-based paint on canvas. Eloisa Faulkner, 1756."
alt="The castle now has two towers and two walls.">
<img src="castle1999.jpeg" title="Film photograph. Séraphin Médéric Mieusement, 1936."
alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>The castle through the ages: 1423, 1756, and 1936 respectively.</figcaption>
</figure>Example 3. Display of a figure containing multiple images with captions text in the img title attribute:
Notes:
- If you are a mouse user you can view the caption text by hovering the mouse cursor over the images.
- If you are a keyboard only user or are viewing the content on a touch display you will be unable to access the caption content.
- The title attribute is an ambiguous and limited semantic container for caption text and therefore is not to be used.
