Examples of recommended methods for marking up groups of images which have associated captions:
An example of how not to mark up groups of images which have associated captions is provided in Example 3
figcaption
is placed at the top of the group figure
.figure
with an associated figcaption
below the image.figcaption
element the name can be marked up using the lang
attribute to indicate it is to be pronounced differently from the rest of the text in the page.figure
and the labelling relationship of figcaption
to assistive technologies. <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>
figure
means users will encounter it first as the navigate through the content.figure
elements provides a richer more granular content structure.figcaption
to 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.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.
figure
using the title
attribute to provide a caption for individual images.<!-- 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>