Re: Coding table notes

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> 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é).