Re: Coding table notes

Hello, 
 
It appears to me that Jaws does not consider <tfoot> a part of the
tabular data. My screen reader test shows : 
- Jaws does not consider the  <tr> in <tfoot> as additional data row in
the table. (e.g. Jaws reads the table as three rows and not four). 
- Jaws does not consider the colspan="3" (e.g. Jaws does not assign the
<td colspan="3"> cell to any <th> and my table is still simple). 
The one thing I like in coding the notes in the <tfoot> is that the
notes and table are together under the table element therefore no need
to wrap the table and notes with an additional element such as <figure>
in my second code proposed.
 
I still consider the second option of coding notes below the table and
wrap both in <figure>. 
Rabab
>>> Christophe Strobbe <strobbe@hdm-stuttgart.de> 2014-12-01 2:11 PM
>>>
Hi,

On 1/12/2014 18:49, Rabab Gomaa wrote:


(...)  
Just to clarify, the table notes here are notes related to the data in
the table (table footnotes) and not information describing the structure
of the table. 

If I were creating such a table, I would put the footnotes below the
table. The reason is that the table appears to describe tabular data,
whereas the notes are a list rather than tabular data. In addition,
adding the footnotes to the footer creates a mixture of a data table
(the current thead and tbody) and a layout table (by suggesting that the
*combined* footnotes have a specific relationship with *each* cell in
the tbody). WCAG 2.0 does not prohibit layout tables but several
techniques advise against combining the coding patterns of data tables
and layout tables.

If you are really keen on having the notes inside the table, you should
check whether this doesn't cause strange behaviour in assistive
technologies, especially screen readers. For example, if you have links
from the table cells to the notes, you should check how the screen
reader announces the footnotes when you jump to them (e.g. announcing
that you are in cell XYZ isn't very useful when you've just jumped to a
footnote). 

Best regards,

Christophe



Here are the solutions I think of. What do you think: 
 
Coding notes in tfoot wrapped with a div: 
 
<table>
<caption>Table 12 : xyz
<thead> <th> <th> <th> </thead>
<tbody> <td> <td> <td> </tbody>
<tfoot>
<tr>
<td colspan="3">
<div class="wb-fnote" role="note">
<p id="fn-table12"><strong>Table 12 Notes</strong></p>
<dl> <!-- place <dt> and <dd> here --></dl>
</div>
</td>
</tr>
</tfoot>
</table>

or 
 
Coding it after the table and wrap the table + notes with <figure> to
group the table and the notes elements: 
<figure>
<table>
<caption>Table 12 : xyz
<thead> <th> <th> <th> </thead>
<tbody> <td> <td> <td> </tbody>
</table>
<div class="wb-fnote" role="note">
<h2 id="fn-table12">Table 12 Notes</h2>
<dl> <!-- place <dt> and <dd> here --></dl>
</div>
</figure>
 
Rabab
>>> Christophe Strobbe <strobbe@hdm-stuttgart.de> (
mailto:strobbe@hdm-stuttgart.de ) 2014-12-01 9:12 AM >>>
Hi,

On 28/11/2014 23:33, Rabab Gomaa wrote:


(...) 
I have a page with multiple tables that have their own notes. Here is
what I think of for the table notes coding. 
- The table notes in a definition list wrapped with <aside> and placed
inside <tfoot> element after <tbody>. Beside having a number to identify
each table.

The tfoot element is not intended for free text notes; it can only
contain table rows (tr elements). A possible use case for tfoot is
repeating the column headers (cf. thead) in a long table; another is
presenting the sum, average, ... of the values in the columns. One of
the features that the authors of HTML4 had in mind was scrolling the
tbody rows between the thead and tfooter rows. 
(Before HTML5, tfoot could only occur between thead and tbody; HTML5
also allows it after tbody.)

If the notes are important for understanding the table, I would not put
them in an aside. 
The HTML5 spec says: "The aside element represents a section of a page
that consists of content that is tangentially related to the content
around the aside element, and which could be considered separate from
that content. Such sections are often represented as sidebars in printed
typography.
The element can be used for typographical effects like pull quotes or
sidebars, for advertising, for groups of nav elements, and for other
content that is considered separate from the main content of the page."

Best regards,

Christophe Strobbe



 
<table>
<caption>Table 12 : xyz
<thead> <th> <th> <th> </thead>
<tbody> <td> <td> <td> </tbody>
<tfoot col="3">
<aside class="wb-fnote" role="note">
<h2 id="fn-table12">Table 12 Notes</h2>
<dl> <!-- place <dt> and <dd> here --></dl>
</aside>
</tfoot>
</table>


-- 
Christophe Strobbe

-- 
Christophe Strobbe
Akademischer Mitarbeiter
Responsive Media Experience Research Group (REMEX)
Hochschule der Medien
Nobelstraße 10
70569 Stuttgart
Tel. +49 711 8923 2749

"La vie est courte, hélas! et je n'ai pas encore lu tous mes livres!"
(d'après Mallarmé).