HTML5 Simplequiz #4: figures, captions and alt text

A few years ago, Dan Cederholm published a series of articles called Simplequiz. Dan posed some options for marking up a specified piece of content and invited readers to choose the one they felt was the best way to mark that up. The value was in the comments, where people defended their choices and debated the options (which means it is the law that you read the preceding comments before adding your own).

With Dan’s blessing, we’re running an occasional series of HTML5 Simplequizzes.

HTML5 offers a way to associate a figure (which can be an image, a video, a graph, a table, a pull-quote) with a caption using the <figure> element. This is very common in print, but there has been no way to do this in HTML4, as there is no element that groups a figure and a caption (other than a semantically-empty <div>).

Our question this week is about alternate text for images that are captioned. I’ve gotten this wrong before (in print, embarrassingly), as have two highly-clueful friends of mine. The man who set us right will be your moderator and quizmaster this week, Steve Faulkner of The Paciello Group, possibly the most respected accessibility agency out there.

We have an image as a figure in a story simply about a dignitary opening a new branch of Mr Lidl’s marvelous emporium. The caption will be “Mayor of Casterbridge opens a new Lidl supermarket”.

What’s the best markup for this? Show your working out.

A:

 <figure>
 <img src=blah.png 
  alt="A portly gent cuts a ribbon. He is with five small children, and is watched by two middle-aged woman, a very tall smiling man, and a small crowd">
  <figcaption>
  Mayor of Casterbridge opens a new Lidl supermarket.
  </figcaption>
 </figure>

B:

<figure role=img aria-labelledby=lidl>
<img src=blah.png alt="">
 <figcaption id=lidl>
  Mayor of Casterbridge opens a new Lidl supermarket.
 </figcaption>
</figure>

C:

<figure>
<img src=blah.png>
 <figcaption>
 Mayor of Casterbridge opens a new Lidl supermarket.
 </figcaption>
</figure>

D:

<figure>
<img src=blah.png alt="">
 <figcaption>
 <p>Mayor of Casterbridge opens a new Lidl supermarket.</p>
 </figcaption>
</figure>

E:

<figure>
<img src=blah.png alt="Mayor of Casterbridge opens a new Lidl supermarket.">
 <figcaption>
  Mayor of Casterbridge opens a new Lidl supermarket.
</figcaption>
</figure>

Steve will wrap up the quiz next Thursday.

HTML5 Simplequiz #4: figures, captions and alt text originally appeared on HTML5 Doctor on November 5, 2010.