W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > April to June 2015

Coding table notes

From: Rabab Gomaa <Rabab.Gomaa@inspection.gc.ca>
Date: Thu, 02 Apr 2015 15:17:04 -0400
Message-Id: <551D5D70020000E000061875@inspection.gc.ca>
To: <w3c-wai-ig@w3.org>
Hello, 
 
I am looking for your thoughts on the best way to code table notes. 
(Table notes here means a table cell has a reference to the note number, the user clicks on the number to jump to the table notes section below the table. i.e. see the "Available Cars" table on the page (http://www.inspection.gc.ca/about-the-cfia/help/site-map/wet-3-0-html-technical-requirements/eng/1426160501826/1426160502764#footnote-table)
 
Here is the code that I propose.  (also wondering if role="note" use is ok in this case)
 
<table>
  <caption class="text-left">Non Available Cars using role=note</caption>
  <thead>
    <tr>
      <th> Car <sup><a href="#fn1" id="fn1-rf">Table Note&nbsp; 1</a></sup></th>
      <th>Color</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ford</td>
      <td>Black</td>
      <td>2000</td>
    </tr>
  </tbody>
</table>
<div role="note">
  <p><strong>Table Notes</strong></p>
  <dl>
    <dt>Table  note 1</dt>
    <dd id="fn1">
      <p>Cars are vehicle that human use.</p>
      <p><a href="#fn1-rf">Return to table note</span>&nbsp;1 referrer</span></a> </p>
    </dd>
    ....
  </dl>
 
Thank you!
Rabab
Received on Thursday, 2 April 2015 19:17:56 UTC

This archive was generated by hypermail 2.3.1 : Thursday, 25 May 2017 01:54:15 UTC