WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Ryan E. Benson
Date: Mar 7, 2013 4:23PM


Hi Rabab,

> On a <figcaption> element: Is it possible to include long description
with list ?
I wouldn't see a reason why you couldn't, however my understanding of using
figure and figcaption makes the content inside of it one big chunk. Reading
an alt, long description and a bulleted list about the same thing
altogether may lead to information overload.

> On a <figcaption> element: is it possible to include table with caption?
The technique is of a table with a caption, so I don't quite follow your
question. Can you explain? It is always a good idea to give the actual data
along with a chart. This helps the content owner by not forcing them to
write a 2 paragraph alt attribute. It helps people with low vision and
cognitive issues if the cannot match the height of the bar with the value
on the axis.

> Is it possible to include the image + description of it in one figure
element?
I think this loops back to your first question/example. We can change the
code to the following and be valid still:
<figure role="group"> <img src="flowchart.gif" alt="Flowchart 1">
<figcaption><strong>Flowchart 1- Process for dealing with a
non-functioning lamp. </strong>
<p>If your lamp doesn't work you may be in the dark!</p>
<p>More details</p>
<p>even more</p>
</figcaption>
</figure>

--
Ryan E. Benson


On Thu, Mar 7, 2013 at 5:08 PM, 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
>
> > > >
>