3rd way: <infonote> inside <caption>

Instead of an element solution to @summary, one could have an element 
solution to a broader concept: info notes inside the <caption>. For 
lack of better word: <infonote>. <infonote> could also potentially be 
useful inside <figcaption>. (I considered <aside>, but ruled it out.) 

<infonote> would not be a solution to @summary per se. Instead it is 
more of a solution to the incompatibility with WCAG H39[1] that HTML5 
has introduced: H39 says that <caption> has a identification purpose, 
and thus regular block level elements (which HTML5 permits inside 
<caption>) should not have any place there. <infonote> would keep 
non-identifying content separate from the "real" identifying caption 
content, and thus be more H39 compatible. 

As to WCAG H73, then <infonote> would not eat into the @summary concept 
- @summary would remain as it is. However, if a 'table summary' was 
deemed useful to the wider audience as well, then the author could move 
the 'table summary' from the @summary and into an <infonote>. (WCAG H73 
forbids that the content of <caption> is repeated in @summary, so one 
would have to choose between @summary or <infonote>, I gather.) The 
positive thing about <infonote> w.r.t. H73, is that it lets you move 
the table summary to the <caption> without breaking WCAG H39. Thus, if 
we adapted this proposal, then I imagine we could keep Laura's @summary 
proposal in full - but for a note that one could also use <infonote>.

 <infonote> vs <details>: Like the 1st example below demonstrates, 
there can be legitimate reasons to place an a note which is neither a 
'table summary' nor a long table description - nor a identifying 
caption, inside the <caption> - <details> is not suitable for this. 
<infonote> is also meant as the only legal block element directly 
inside <caption> - I did not see that <details> was suggested as the 
single block element permitted inside <caption>.

 PS: Adding a 'table summary' inside <caption> is possible as HTML5 
stands! You *can* add a table summary inside the <caption>, if you 
accept to break WCAG H39. The only way to (mildly) "trigger" people to 
place 'table summaries' inside a @summary instead of inside <caption>, 
is to maintain some restrictions of what <caption> can contain = no 
block elements. And this is of course also the only way to maintain 
<caption>'s identification purpose as well - hence <infonote>. 
<infonote> has the advantage over e.g. reusing <p> or <div> that 
<infonote> is "more semantic". E.g. if you use a <p>, then there is 
nothing that hinders that the info you started on in the first <p>, 
wouldn't continue in the next <p>. Whereas <infonote> is a more natural 
container for one specific issue related to the table.

 PPS: Instead of this proposal, I considered proposing a <summary> 
element as direct child of <caption> - it would be much simpler to 
define a cross-browser compatible solution, if the table summary 
element was allowed to be the child of <caption> rather than a child of 
<table>. (Shelley pointed to some problems even when we use a second 
<caption>.) As long as the content of such a <summary> was limited to 
be inline elements, then it would even work in Firefox 2.

However, I figured that 
  a) this would not solve the (unraised) issue of WCAG H39 
compatibility and 
  b) the  opposition against a pure summary element from many @summary 
supporters isn't an inspiration either. Instead Laura's words about not 
distorting the purpose of @summary  made me think about a "third" 
solution. As did John's "ghetto" comment. Of course, if a 'table 
summary' is placed inside a <infonote>, then there is no limit to how 
authors could style it - I am not sure if I understood Gez correctly in 
that styling would be a problem. Because if styling could be a problem, 
then a <summary> element would still solve *that* problem better than 
block elements (HTML5 as it stands) and <infonote>s. For example, AT 
could simply be designed to ignore any styling, emphasis etc inside a 
<summary> element.

 EXAMPLES:

WCAG2 H73 example [2], with a <infonote> added:

<table summary="Intersections are listed in row 1.  Find the 
intersection closest to your starting point or destination, then read 
down that column to find out what time the bus leaves that 
intersection. Service begins at 4:00 AM and ends at midnight.">
 <caption>Route 7 Downtown (Weekdays)
<INFONOTE>Only valid from Week 47.</INFONOTE>
</caption>

To give all readers access to the user guide inside @summary, one could 
use <INFONOTE> for that as well:

<table><caption>Route 7 Downtown (Weekdays)
  <INFONOTE> Only valid from Week 47.</INFONOTE>
  <INFONOTE>Intersections are listed in row 1.  Find the intersection 
closest to your starting point or destination, then read down that 
column to find out what time the bus leaves that intersection. Service 
begins at 4:00 AM and ends at midnight.</INFONOTE>
</caption>

HTML5’s <caption> example: [3]

<caption>Table 1.
<INFONOTE>This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.</INFONOTE>
</caption>

[1] http://www.w3.org/TR/WCAG20-TECHS/H39

[2] http://www.w3.org/TR/WCAG20-TECHS/H73#H73-tests

[3] http://dev.w3.org/html5/spec/tabular-data#the-caption-element

-- 
leif halvard silli

Received on Wednesday, 3 March 2010 04:41:50 UTC