HTML5 Accessibility Chops: using 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:

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

Categories: Technical

About Steve Faulkner

Steve was the Chief Accessibility Officer at TPGi before he left in October 2023. He joined TPGi in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including ARIA in HTML and HTML Accessibility API Mappings 1.0. He also develops and maintains HTML5accessibility and the JAWS bug tracker/standards support.

Comments

Ralph says:

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 🙂

Steve Faulkner says:

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.

Ralph says:

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!