RE: thinking about HTML5 figure and figcaption elements

Steve,

Good point. The aria role img  (MSAA ROLE_SYSTEM_GRAPHIC, Image)would probably map to <figure> if the example depicts 3 parts of a castle:

<figure role="img">
 <img src="castle1423a.jpeg" title="left part"
      alt="left part of the castle"
 <img src="castle1423b.jpeg" title="middle"
      alt="middle part of the castle"
 <img src=" castle1423c.jpeg" title="right"
      alt="right part of the castle">
 <figcaption>The castle</figcaption>
</figure>

But for code examples it is more like (MSAA ROLE_SYSTEM_TEXT, IA2_ROLE_HEADING, Text) for the content can be text node only ..

This leads to the potential request/requirement for a "type" flag (e.g. figure  type="text" or type="graphics") that indicates the inner content.
According to the value, UA's may adjust their mapping (just an idea).

Besides of this, it should be discussed if figure content can also contain <canvas>, <svg> or <object> elements that do display illustrations and diagrams.

- Stefan


From: wai-xtech-request@w3.org [mailto:wai-xtech-request@w3.org] On Behalf Of Steve Faulkner
Sent: Montag, 25. Oktober 2010 11:33
To: W3C WAI-XTECH; HTML Accessibility Task Force
Subject: thinking about HTML5 figure and figcaption elements

Hi all,

I have been wondering about how the HTML5 figure [1] and figcaption elements should be mapped to accessibility APIs and aslo what advice should be provided to AT about conveying its semantics to users.

The figure element:
"The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc,"

The figcaption element:
"The figcaption element represents a caption or legend for the rest of the contents of the figcaption element's parent figure element, if any."

Code examples from the spec:

Example 1

<figure id="l4">
<figcaption>Listing 4. The primary core interface API declaration.</figcaption>
<pre><code>interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence&lt;byte> data);
void initSelfDestruct();
}</code></pre>
</figure>

Example 2
<figure>
<img src="bubbles-work.jpeg"alt="Bubbles, sitting in his office chair, works on his latest project intently.">
<figcaption>Bubbles at work</figcaption>
</figure>

Example 3
<figure>
 <p>'Twas brillig, and the slithy toves<br>
 Did gyre and gimble in the wabe;<br>
 All mimsy were the borogoves,<br>
 And the mome raths outgrabe.</p>
 <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure>
Example 4

<figure>
 <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
      alt="The castle has one tower, and a tall wall around it.">
 <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
      alt="The castle now has two towers and two walls.">
 <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

In order to make the figure/figcaption a useful semantic container a standard set of rules
needs to be worked out on how the figcaption/figure element.s will work.

For example:

 *   should the figcaption be the accessible name for the figure element?
 *   What are the default roles of the figure and figcaption elements?
 *   Should the role of the figure element change depending on the content of figure?
 *   Should the name of the elements be presented to users?
 *   What is the relationship between alt and title on images within the figure and the figcaption content?
 *   Should accessible relationships be hardwired into the browser accessibility API mappings or left up to the AT?

[1] http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element

[2] http://dev.w3.org/html5/spec/grouping-content.html#the-figcaption-element
--

with regards

Steve Faulkner
Technical Director - TPG Europe
Director - Web Accessibility Tools Consortium

www.paciellogroup.com<http://www.paciellogroup.com> | www.wat-c.org<http://www.wat-c.org>
Web Accessibility Toolbar - http://www.paciellogroup.com/resources/wat-ie-about.html