E-mail List Archives
Number of posts in this thread: 4 (In chronological order)
From: Rabab Gomaa
Date: Mar 7, 2013 3:08PM
Subject: Question- use of <figure> and <figcaption>
No previous message | Next message →
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
From: Ryan E. Benson
Date: Mar 7, 2013 4:23PM
Subject: Re: Question- use of <figure> and <figcaption>
← Previous message | Next message →
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 ADDRESS 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
>
> > > >
>
From: Steve Faulkner
Date: Mar 8, 2013 7:51AM
Subject: Re: Question- use of <figure> and <figcaption>
← Previous message | Next message →
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 ADDRESS 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
>
> > > >
>
From: Rabab Gomaa
Date: Mar 8, 2013 7:57AM
Subject: Re: Question- use of <figure> and <figcaption>
← Previous message | No next message
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 ADDRESS 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 ADDRESS 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
>
> > > >
>