[html5] r3356 - [] (0) Elaborate on how to describe a table.

[whatwg at whatwg.org]

Author: ianh
Date: 2009-07-05 20:06:56 -0700 (Sun, 05 Jul 2009)
New Revision: 3356

Modified:
   index
   source
Log:
[] (0) Elaborate on how to describe a table.

Modified: index
===================================================================
--- index	2009-07-03 19:56:36 UTC (rev 3355)
+++ index	2009-07-06 03:06:56 UTC (rev 3356)
@@ -67,7 +67,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-standard-—-date:-01-jan-1901>Draft Standard — 3 July 2009</h2>
+   <h2 class="no-num no-toc" id=draft-standard-—-date:-01-jan-1901>Draft Standard — 6 July 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>
    <!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -25972,25 +25972,201 @@
   tables for layout, primarily using CSS positioning and the CSS table
   model.</p>
 
+  <div class=impl>
+
   <p>User agents that do table analysis on arbitrary content are
   encouraged to find heuristics to determine which tables actually
   contain data and which are merely being used for layout. This
   specification does not define a precise heuristic.</p>
 
+  </div>
+
   <p>Tables have rows and columns given by their descendants. A table
   must not have an empty row or column<span class=impl>, as
   described in the description of the <a href=#table-model>table
   model</a></span>. <!-- conformance criteria for detecting this
   are in the table model section --></p>
 
-  <div class=impl>
+  <p>For tables that consist of more than just a grid of cells with
+  headers in the first row and headers in the first column, and for
+  any table in general where the reader might have difficulty
+  understanding the content, authors should include explanatory
+  information introducing the table. This information is useful for
+  all users, but is especially useful for users who cannot see the
+  table, e.g. users of screen readers.</p>
 
+  <p>Such explanatory information should introduce the purpose of the
+  table, outline its basic cell structure, highlight any trends or
+  patterns, and generally teach the user how to use the table.</p>
+
+  <div class=example>
+
+   <p>For instance, the following table:</p>
+
+   <table><caption>Characteristics with positive and negative sides</caption>
+    <thead><tr><th id=n> Negative
+      <th> Characteristic
+      <th> Positive
+    <tbody><tr><td headers="n r1"> Sad
+      <th id=r1> Mood
+      <td> Happy
+     <tr><td headers="n r2"> Failing
+      <th id=r2> Grade
+      <td> Passing
+   </table><p>...might benefit from a description explaining to the way the
+   table is laid out, something like "Characteristics are given in the
+   second column, with the negative side in the left column and the
+   positive side in the right column".</p>
+
+  </div>
+
+  <p>There are a variety of ways to include this information:</p>
+
+  <dl><dt>In prose, surrounding the table</dt>
+
+   <dd>
+    <div class=example><pre><p>In the following table, characteristics are given in the second
+column, with the negative side in the left column and the positive
+side in the right column.</p>
+<table>
+ <caption>Characteristics with positive and negative sides</caption>
+ <thead>
+  <tr>
+   <th id="n"> Negative
+   <th> Characteristic
+   <th> Positive
+ <tbody>
+  <tr>
+   <td headers="n r1"> Sad
+   <th id="r1"> Mood
+   <td> Happy
+  <tr>
+   <td headers="n r2"> Failing
+   <th id="r2"> Grade
+   <td> Passing
+</table></pre></div>
+   </dd>
+
+   <dt>In the table's <code><a href=#the-caption-element>caption</a></code></dt>
+
+   <dd>
+    <div class=example><pre><table>
+ <caption>
+  <strong>Characteristics with positive and negative sides.</strong>
+  <p>Characteristics are given in the second column, with the
+  negative side in the left column and the positive side in the right
+  column.</p>
+ </caption>
+ <thead>
+  <tr>
+   <th id="n"> Negative
+   <th> Characteristic
+   <th> Positive
+ <tbody>
+  <tr>
+   <td headers="n r1"> Sad
+   <th id="r1"> Mood
+   <td> Happy
+  <tr>
+   <td headers="n r2"> Failing
+   <th id="r2"> Grade
+   <td> Passing
+</table></pre></div>
+   </dd>
+
+   <dt>In the table's <code><a href=#the-caption-element>caption</a></code>, in a <code><a href=#the-details-element>details</a></code> element</dt>
+
+   <dd>
+    <div class=example><pre><table>
+ <caption>
+  <strong>Characteristics with positive and negative sides.</strong>
+  <details>
+   <legend>Help</legend>
+   <p>Characteristics are given in the second column, with the
+   negative side in the left column and the positive side in the right
+   column.</p>
+  </details>
+ </caption>
+ <thead>
+  <tr>
+   <th id="n"> Negative
+   <th> Characteristic
+   <th> Positive
+ <tbody>
+  <tr>
+   <td headers="n r1"> Sad
+   <th id="r1"> Mood
+   <td> Happy
+  <tr>
+   <td headers="n r2"> Failing
+   <th id="r2"> Grade
+   <td> Passing
+</table></pre></div>
+   </dd>
+
+   <dt>Next to the table, in the same <code><a href=#the-figure-element>figure</a></code></dt>
+
+   <dd>
+    <div class=example><pre><figure>
+ <legend>Characteristics with positive and negative sides</legend>
+ <p>Characteristics are given in the second
+ column, with the negative side in the left column and the positive
+ side in the right column.</p>
+ <table>
+  <thead>
+   <tr>
+    <th id="n"> Negative
+    <th> Characteristic
+    <th> Positive
+  <tbody>
+   <tr>
+    <td headers="n r1"> Sad
+    <th id="r1"> Mood
+    <td> Happy
+   <tr>
+    <td headers="n r2"> Failing
+    <th id="r2"> Grade
+    <td> Passing
+ </table>
+<figure>
+</pre></div>
+   </dd>
+
+   <dt>Next to the table, in a <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-legend-element>legend</a></code></dt>
+
+   <dd>
+    <div class=example><pre><figure>
+ <legend>
+  <strong>Characteristics with positive and negative sides</strong>
+  <p>Characteristics are given in the second
+  column, with the negative side in the left column and the positive
+  side in the right column.</p>
+ </legend>
+ <table>
+  <thead>
+   <tr>
+    <th id="n"> Negative
+    <th> Characteristic
+    <th> Positive
+  <tbody>
+   <tr>
+    <td headers="n r1"> Sad
+    <th id="r1"> Mood
+    <td> Happy
+   <tr>
+    <td headers="n r2"> Failing
+    <th id="r2"> Grade
+    <td> Passing
+ </table>
+<figure>
+</pre></div>
+   </dd>
+
+  </dl><div class=impl>
+
   <p>If a <code><a href=#the-table-element>table</a></code> element has a <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> attribute, the user agent
   may report the contents of that attribute to the user.</p>
 
-  <p class=note>Authors are encouraged to use the
-  <code><a href=#the-caption-element>caption</a></code> element instead of the <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> attribute.</p>
-
   </div>
 
   <dl class=domintro><dt><var title="">table</var> . <code title=dom-table-caption><a href=#dom-table-caption>caption</a></code> [ = <var title="">value</var> ]</dt>
@@ -26268,18 +26444,14 @@
 
   </div>
 
-  <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>
 
+  <p>A caption can introduce context for a table, making it
+  significantly easier to understand.</p>
+
   <div class=example>
 
    <p>Consider, for instance, the following table:</p>

Modified: source
===================================================================
--- source	2009-07-03 19:56:36 UTC (rev 3355)
+++ source	2009-07-06 03:06:56 UTC (rev 3356)
@@ -28578,27 +28578,214 @@
   tables for layout, primarily using CSS positioning and the CSS table
   model.</p>
 
+  <div class="impl">
+
   <p>User agents that do table analysis on arbitrary content are
   encouraged to find heuristics to determine which tables actually
   contain data and which are merely being used for layout. This
   specification does not define a precise heuristic.</p>
 
+  </div>
+
   <p>Tables have rows and columns given by their descendants. A table
   must not have an empty row or column<span class="impl">, as
   described in the description of the <span>table
   model</span></span>. <!-- conformance criteria for detecting this
   are in the table model section --></p>
 
+  <p>For tables that consist of more than just a grid of cells with
+  headers in the first row and headers in the first column, and for
+  any table in general where the reader might have difficulty
+  understanding the content, authors should include explanatory
+  information introducing the table. This information is useful for
+  all users, but is especially useful for users who cannot see the
+  table, e.g. users of screen readers.</p>
+
+  <p>Such explanatory information should introduce the purpose of the
+  table, outline its basic cell structure, highlight any trends or
+  patterns, and generally teach the user how to use the table.</p>
+
+  <div class="example">
+
+   <p>For instance, the following table:</p>
+
+   <table>
+    <caption>Characteristics with positive and negative sides</caption>
+    <thead>
+     <tr>
+      <th id="n"> Negative
+      <th> Characteristic
+      <th> Positive
+    <tbody>
+     <tr>
+      <td headers="n r1"> Sad
+      <th id=r1> Mood
+      <td> Happy
+     <tr>
+      <td headers="n r2"> Failing
+      <th id=r2> Grade
+      <td> Passing
+   </table>
+
+   <p>...might benefit from a description explaining to the way the
+   table is laid out, something like "Characteristics are given in the
+   second column, with the negative side in the left column and the
+   positive side in the right column".</p>
+
+  </div>
+
+  <p>There are a variety of ways to include this information:</p>
+
+  <dl>
+
+   <dt>In prose, surrounding the table</dt>
+
+   <dd>
+    <div class="example"><pre><p>In the following table, characteristics are given in the second
+column, with the negative side in the left column and the positive
+side in the right column.</p>
+<table>
+ <caption>Characteristics with positive and negative sides</caption>
+ <thead>
+  <tr>
+   <th id="n"> Negative
+   <th> Characteristic
+   <th> Positive
+ <tbody>
+  <tr>
+   <td headers="n r1"> Sad
+   <th id="r1"> Mood
+   <td> Happy
+  <tr>
+   <td headers="n r2"> Failing
+   <th id="r2"> Grade
+   <td> Passing
+</table></pre></div>
+   </dd>
+
+   <dt>In the table's <code>caption</code></dt>
+
+   <dd>
+    <div class="example"><pre><table>
+ <caption>
+  <strong>Characteristics with positive and negative sides.</strong>
+  <p>Characteristics are given in the second column, with the
+  negative side in the left column and the positive side in the right
+  column.</p>
+ </caption>
+ <thead>
+  <tr>
+   <th id="n"> Negative
+   <th> Characteristic
+   <th> Positive
+ <tbody>
+  <tr>
+   <td headers="n r1"> Sad
+   <th id="r1"> Mood
+   <td> Happy
+  <tr>
+   <td headers="n r2"> Failing
+   <th id="r2"> Grade
+   <td> Passing
+</table></pre></div>
+   </dd>
+
+   <dt>In the table's <code>caption</code>, in a <code>details</code> element</dt>
+
+   <dd>
+    <div class="example"><pre><table>
+ <caption>
+  <strong>Characteristics with positive and negative sides.</strong>
+  <details>
+   <legend>Help</legend>
+   <p>Characteristics are given in the second column, with the
+   negative side in the left column and the positive side in the right
+   column.</p>
+  </details>
+ </caption>
+ <thead>
+  <tr>
+   <th id="n"> Negative
+   <th> Characteristic
+   <th> Positive
+ <tbody>
+  <tr>
+   <td headers="n r1"> Sad
+   <th id="r1"> Mood
+   <td> Happy
+  <tr>
+   <td headers="n r2"> Failing
+   <th id="r2"> Grade
+   <td> Passing
+</table></pre></div>
+   </dd>
+
+   <dt>Next to the table, in the same <code>figure</code></dt>
+
+   <dd>
+    <div class="example"><pre><figure>
+ <legend>Characteristics with positive and negative sides</legend>
+ <p>Characteristics are given in the second
+ column, with the negative side in the left column and the positive
+ side in the right column.</p>
+ <table>
+  <thead>
+   <tr>
+    <th id="n"> Negative
+    <th> Characteristic
+    <th> Positive
+  <tbody>
+   <tr>
+    <td headers="n r1"> Sad
+    <th id="r1"> Mood
+    <td> Happy
+   <tr>
+    <td headers="n r2"> Failing
+    <th id="r2"> Grade
+    <td> Passing
+ </table>
+<figure>
+</pre></div>
+   </dd>
+
+   <dt>Next to the table, in a <code>figure</code>'s <code>legend</code></dt>
+
+   <dd>
+    <div class="example"><pre><figure>
+ <legend>
+  <strong>Characteristics with positive and negative sides</strong>
+  <p>Characteristics are given in the second
+  column, with the negative side in the left column and the positive
+  side in the right column.</p>
+ </legend>
+ <table>
+  <thead>
+   <tr>
+    <th id="n"> Negative
+    <th> Characteristic
+    <th> Positive
+  <tbody>
+   <tr>
+    <td headers="n r1"> Sad
+    <th id="r1"> Mood
+    <td> Happy
+   <tr>
+    <td headers="n r2"> Failing
+    <th id="r2"> Grade
+    <td> Passing
+ </table>
+<figure>
+</pre></div>
+   </dd>
+
+  </dl>
+
   <div class="impl">
 
   <p>If a <code>table</code> element has a <code
   title="attr-table-summary">summary</code> attribute, the user agent
   may report the contents of that attribute to the user.</p>
 
-  <p class="note">Authors are encouraged to use the
-  <code>caption</code> element instead of the <code
-  title="attr-table-summary">summary</code> attribute.</p>
-
   </div>
 
   <dl class="domintro">
@@ -28906,18 +29093,14 @@
 
   </div>
 
-  <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>
 
+  <p>A caption can introduce context for a table, making it
+  significantly easier to understand.</p>
+
   <div class="example">
 
    <p>Consider, for instance, the following table:</p>