Images gallery title inside a section or figure?

Question

I'm doing a website with a good HTML5 semantic structure, and a question born when I added an image gallery to an article. NB: My <figure> is in a <article>.

What is the best way to design a image gallery? (think accessibility)

<section>
  <h1>Gallery title</h1>
  <figure role="img">
    <img src="../img/img1.jpg" alt="Img 1" title="image 1" />
    <img src="../img/img2.jpg" alt="Img 2" title="image 2" />
    <img src="../img/img3.jpg" alt="Img 3" title="image 3" />
    <img src="../img/img4.jpg" alt="Img 4" title="image 4" />
  </figure>
<section>

or this:

<figure role="img">
    <figcaption aria-labelled="#maintitle">Gallery title</figcaption>  
    <div>
        <img src="../img/img1.jpg" alt="Img 1" title="image 1" />
        <img src="../img/img2.jpg" alt="Img 2" title="image 2" />
        <img src="../img/img3.jpg" alt="Img 3" title="image 3" />
        <img src="../img/img4.jpg" alt="Img 4" title="image 4" />
    </div>
</figure>

Which structure is the best way? Do you have other suggestions?

Figcaption W3C: http://www.w3.org/TR/html5/grouping-content.html#the-figcaption-element figcaption HTML5Doctor: http://html5doctor.com/the-figure-figcaption-elements/

Thank you in advance to all

Geo

UPDATE: The parent structure is:

<article>
    <h1 id="maintitle">Title</h1>
    <p>
        Lorem ipsum dolor sit amet...
    </p>

    <!-- GALLERY HERE-->

    <section>
        <!--other things, like a download area-->
    </section>
</article>

This depends on the context where this gallery appears on the page. Is `article` the parent element of both snippets? If yes, any other content in this `article`? — unor, Oct 03 '14 at 23:47

score -1 · Accepted Answer · edited May 23 '17 at 11:54

I think it boils down to the question: Should I use section for my gallery?

There can be no general answer, this always depends on your actual content. Look at the document outline (for example, with the HTML5 Outliner). Does it make sense with an entry for the gallery? If yes, go with section, if not, don’t.

Your article would have the following outline if you use section for the gallery:

1. "Title" {article}
  1.1 "Gallery title" {section}
  1.2 untitled {section}

And without this section, it would have the following outline:

1. "Title" {article}
  1.1 untitled {section}

As you can come up with a heading for the gallery, it is a good indicator that section might be appropriate (and if you definitely want to provide a heading, you should use a sectioning content element anyway). If the gallery could, in principle, need its own footer (for example, for providing author data or copyright information), then this is another indicator that section might be appropriate.

By the way, the img role doesn’t seem to be appropriate on the figure, as your gallery contains several images, right? The img role, however, is only to be used for one image (which may consist of multiple image files).

I structured all document based on the Outline with `
`s, I'll continue in that way. About `role="img"`: yes, is placed wrong, is better to set the attribute on each ``, isn't? Thank you very much an other small step to my know how — gBaylaender, Oct 07 '14 at 07:52
@Oeg87: Re. `img` role: I think this should be a separate question. — unor, Oct 08 '14 at 19:31
I was reading the definition of `role=img`: http://www.w3.org/TR/2008/WD-wai-aria-20080806/#img It say: “An `img` can contain captions and descriptive text, as well as **multiple image files that when viewed together give the impression of a single image**” I think is clear and understandable, my example is with a wrong use :) — gBaylaender, Oct 09 '14 at 15:40

Images gallery title inside a section or figure?

1 Answers1