WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Question- use of <figure> and <figcaption>

for

From: Rabab Gomaa
Date: Mar 8, 2013 7:57AM


Thanks Steve! This is the impression that I got from reading your examples on the page however I wanted to reconfirm it.
Rabab


>>> Steve Faulkner < <EMAIL REMOVED> > 3/8/2013 9:51 am >>>
Hi Rabab,

I would not use the figcaption element for lengthy/structured text.


The figure element groups content i.e. conveys that the content within it
is associated and the figcaption element acts as the name/label for the the
figure element. This is how it is implemented in Firefox for example.


regards
SteveF


On 7 March 2013 22:08, Rabab Gomaa < <EMAIL REMOVED> > wrote:

> Hello
>
> I have read the HTML 5 standards and HTML5: Techniques for providing
> useful text alternatives. Upon my understanding both <figure> and
> <figcaption> allow flow content like table and list. However, I am still
> wondering if the following would be a good use for <figure> and
> <figcaption> elements.
>
> 1- On http://www.w3.org/TR/html-alt-techniques/#hag
> On a <figcaption> element: Is it possible to include long description
> with list ?
> <figure role="group"> <img src="flowchart.gif" alt="Flowchart 1">
> <figcaption>Flowchart 1- Process for dealing with a non-functioning
> lamp. <strong>If the lamp doesn't work:</strong>
> <ol>
> <li>Check if it's plugged in, if not, plug it in.</li>
> </ol>...
> </figcaption>
> </figure>
>
> 2- On http://www.w3.org/TR/html-alt-techniques/#hag
> On a <figcaption> element: is it possible to include table with caption?
> <figure role="group"> <img src="flowchart.gif" alt="Flowchart 1">
> <figcaption>
> <table>
> <caption> Flowchart 1- Process for dealing with a non-functioning lamp.
> </caption>
> <tr>
> <th>content </th>
> <th>content</th>
> </tr>... </table>
> </figcaption>
> </figure>
>
>
> 3- On http://www.w3.org/TR/html-alt-techniques/#hag21
> Is it possible to include the image + description of it in one figure
> element?
> <figure role="group">
> <p><img src="rainchart.gif" alt="Bar Chart 1"> </p>
> <table>
> <caption>Bar Chart 1 - Rainfall in millimetres by Country and Season.
> </caption>
> <tr>
> <td></td>
> <th scope="col">UK</th>
> <th scope="col">Japan</th>
> <th scope="col">Australia</th>
> </tr>
> <tr>
> <th scope="row">Spring</th>
> <td>5.5 (highest)</td>
> <td>2.4</td>
> <td>2 (lowest)</td>
> </tr> ...
> </table>
> </figure>
>
> Thank you,
> Rabab Gomaa
>
> > > >
>