[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