HTML5 Accessibility Chops: using nested figure elements

Posted on Friday, 25 November 2011 by Steve Faulkner

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


About Steve Faulkner

Steve is the Senior Web Accessibility Consultant and Technical Director, TPG Europe. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at Vision Australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C HTML Working Group and the W3C Protocols and Formats Working Group. He is an editor of several specifications at the W3C including HTML 5.1, Using WAI-ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility

Comments

  1. 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 :)

  2. 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.

  3. 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!

Comments for this post are closed.

Having worked in accessibility for quite some time I can tell you that TPG's Steve Faulkner is one of the top technical accessibility talents, and leaders, in the field and I have no reservations in giving him my endorsement.

Richard Schwerdtfeger, Distinguished Engineer and CTO for Accessibility of IBM Software