NOTE: The current preferred location for bug reports is the GitHub issue tracker.
Bug 534 - Give more details of how <caption> elements should be used.
Give more details of how <caption> elements should be used.
Status: RESOLVED INTENTIONAL
Product: Validator.nu
Classification: Unclassified
Component: General
HEAD
All All
: P2 normal
Assigned To: Henri Sivonen
http://svn.whatwg.org/webapps/source?...
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2009-05-27 14:24 CEST by Henri Sivonen
Modified: 2009-05-27 14:32 CEST (History)
0 users

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Henri Sivonen 2009-05-27 14:24:04 CEST
Index: source
===================================================================
--- source	(revision 2862)
+++ source	(revision 2863)
@@ -25448,6 +25448,67 @@
   <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>&lt;caption>
+&lt;strong>Table 1.&lt;/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.
+&lt;/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>