[html5] r2863 - [ac] (0) Give more details of how <caption> elements should be used.

whatwg at whatwg.org whatwg at whatwg.org
Mon Feb 23 18:19:36 PST 2009


Author: ianh
Date: 2009-02-23 18:19:34 -0800 (Mon, 23 Feb 2009)
New Revision: 2863

Modified:
   header-whatwg
   index
   source
Log:
[ac] (0) Give more details of how <caption> elements should be used.

Modified: header-whatwg
===================================================================
--- header-whatwg	2009-02-23 22:04:41 UTC (rev 2862)
+++ header-whatwg	2009-02-24 02:19:34 UTC (rev 2863)
@@ -12,6 +12,9 @@
    .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
    table.matrix, table.matrix td { border: none; text-align: right; }
    table.matrix { margin-left: 2em; }
+   .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
+   .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
+   .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
    .applies th > * { display: block; white-space: nowrap; }
    #updatesStatus { display: none; }
    #updatesStatus.relevant { display: block; position: fixed; right: 1em; top: 1em; padding: 0.5em; font: bold small sans-serif; min-width: 25em; width: 30%; max-width: 40em; height: auto; border: ridge 4px gray; background: #EEEEEE; color: black; }

Modified: index
===================================================================
--- index	2009-02-23 22:04:41 UTC (rev 2862)
+++ index	2009-02-24 02:19:34 UTC (rev 2863)
@@ -6,6 +6,9 @@
    .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
    table.matrix, table.matrix td { border: none; text-align: right; }
    table.matrix { margin-left: 2em; }
+   .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
+   .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
+   .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
    .applies th > * { display: block; white-space: nowrap; }
    #updatesStatus { display: none; }
    #updatesStatus.relevant { display: block; position: fixed; right: 1em; top: 1em; padding: 0.5em; font: bold small sans-serif; min-width: 25em; width: 30%; max-width: 40em; height: auto; border: ridge 4px gray; background: #EEEEEE; color: black; }
@@ -34,7 +37,7 @@
   <div class=head>
    <p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
    <h1>HTML 5</h1>
-   <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 23 February 2009</h2>
+   <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 24 February 2009</h2>
    <p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
    <p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
    <dl><dt>Multiple-page version:</dt>
@@ -23084,7 +23087,62 @@
   <p>The <code><a href=#the-caption-element>caption</a></code> element takes part in the <a href=#table-model>table
   model</a>.</p>
 
+  <p>The <code><a href=#the-caption-element>caption</a></code> element should be included for any table
+  where the reader might have difficulty understanding the content or
+  where the table's structure would not be obvious to the user of a
+  screen reader. The element's contents should describe what the
+  purpose of the table is, along with any information that could be
+  useful for understanding and using the table.</p>
 
+  <p>When a <code><a href=#the-table-element>table</a></code> element is in a <code><a href=#the-figure-element>figure</a></code>
+  element alone but for the <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-legend-element>legend</a></code>,
+  the <code><a href=#the-caption-element>caption</a></code> element should be omitted in favor of the
+  <code><a href=#the-legend-element>legend</a></code>.</p>
+
+  <div class=example>
+
+   <p>Consider, for instance, the following table:</p>
+
+   <table class=dice-example><tr><th>   <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
+    <tr><th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
+    <tr><th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
+    <tr><th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
+    <tr><th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
+    <tr><th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
+    <tr><th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
+   </table><p>In the abstract, this table is not clear. However, with a
+   caption giving the table's number (for reference in the main prose)
+   and explaining its use, it makes more sense:</p>
+
+   <pre><caption>
+<strong>Table 1.</strong>
+This table shows the total score obtained from rolling two six-sided
+dice. The first row represents the value of the first die, the first
+column the value of the second die. The total is given in the cell
+that corresponds to the values of the two dice.
+</caption></pre>
+
+   <p>This provides the user with more context:</p>
+
+   <table class=dice-example><caption>
+     <strong>Table 1.</strong>
+     This table shows the total score obtained from rolling two six-sided
+     dice. The first row represents the value of the first die, the first
+     column the value of the second die. The total is given in the cell
+     that corresponds to the values of the two dice.
+    </caption>
+    <tr><th>   <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
+    <tr><th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
+    <tr><th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
+    <tr><th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
+    <tr><th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
+    <tr><th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
+    <tr><th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
+   </table></div>
+
+
+
+
   <h4 id=the-colgroup-element><span class=secno>4.9.4 </span>The <dfn><code>colgroup</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>

Modified: source
===================================================================
--- source	2009-02-23 22:04:41 UTC (rev 2862)
+++ source	2009-02-24 02:19:34 UTC (rev 2863)
@@ -25448,7 +25448,68 @@
   <p>The <code>caption</code> element takes part in the <span>table
   model</span>.</p>
 
+  <p>The <code>caption</code> element should be included for any table
+  where the reader might have difficulty understanding the content or
+  where the table's structure would not be obvious to the user of a
+  screen reader. The element's contents should describe what the
+  purpose of the table is, along with any information that could be
+  useful for understanding and using the table.</p>
 
+  <p>When a <code>table</code> element is in a <code>figure</code>
+  element alone but for the <code>figure</code>'s <code>legend</code>,
+  the <code>caption</code> element should be omitted in favor of the
+  <code>legend</code>.</p>
+
+  <div class="example">
+
+   <p>Consider, for instance, the following table:</p>
+
+   <table class="dice-example">
+    <tr> <th>   <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
+    <tr> <th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
+    <tr> <th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
+    <tr> <th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
+    <tr> <th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
+    <tr> <th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
+    <tr> <th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
+   </table>
+
+   <p>In the abstract, this table is not clear. However, with a
+   caption giving the table's number (for reference in the main prose)
+   and explaining its use, it makes more sense:</p>
+
+   <pre><caption>
+<strong>Table 1.</strong>
+This table shows the total score obtained from rolling two six-sided
+dice. The first row represents the value of the first die, the first
+column the value of the second die. The total is given in the cell
+that corresponds to the values of the two dice.
+</caption></pre>
+
+   <p>This provides the user with more context:</p>
+
+   <table class="dice-example">
+    <caption>
+     <strong>Table 1.</strong>
+     This table shows the total score obtained from rolling two six-sided
+     dice. The first row represents the value of the first die, the first
+     column the value of the second die. The total is given in the cell
+     that corresponds to the values of the two dice.
+    </caption>
+    <tr> <th>   <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
+    <tr> <th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
+    <tr> <th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
+    <tr> <th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
+    <tr> <th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
+    <tr> <th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
+    <tr> <th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
+   </table>
+
+  </div>
+
+
+
+
   <h4>The <dfn><code>colgroup</code></dfn> element</h4>
 
   <dl class="element">




More information about the Commit-Watchers mailing list