Re: Coding table notes

I'll comment on keyboard focus. (Others may wish to answer the question
about role=note, or comment on the semantics.)

Start by adding a tabindex here:
<dd id="fn1" tabindex="-1">

That *should* be enough for the element to get keyboard focus, according to
HTML5.
http://www.w3.org/TR/html5/browsers.html#scroll-to-the-fragment-identifier

But it's probably not enough.
http://accessibleculture.org/articles/2010/05/in-page-links/

JavaScript can improve the experience with keyboarding or a screen reader,
and you might like the slightly different scrolling behavior. Here's a
minimal demo.
<a href="#fn1" id="fn1-rf" onclick="document.getElementById('fn1').focus();
return false;">

Fancier JavaScript is available. Your mileage may vary.
http://www.sitepoint.com/learning-to-focus/
https://gist.github.com/Zegnat/1900563

Cheers,
Mitchell Evan
mtchllvn@gmail.com


On Thu, Apr 2, 2015 at 12:17 PM, Rabab Gomaa <Rabab.Gomaa@inspection.gc.ca>
wrote:

>  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
>



-- 
Mitchell Evan
mtchllvn@gmail.com
(510) 375-6104 mobile