Re: Change proposal to replace @summary with <details>

On Feb 16, 2010, at 8:31 AM, Cynthia Shelly wrote:

> This is my change proposal for replacing summary with details, as we  
> discussed on last week's call.  Please put this on the agenda for  
> Thursday.
>
> http://www.w3.org/WAI/PF/HTML/wiki/Details_element_as_a_replacement_for_summary_attribute%2C_Feb_15%2C_2010#References
> <tableexamples2.html>

This is a technical comment with my chair hat off.

I am very interested in this Change Proposal, and I decided to do some  
study of the details@noflow idea. Quoting from the Change Proposal
<http://www.w3.org/WAI/PF/HTML/wiki/Details_element_as_a_replacement_for_summary_attribute%2C_Feb_15%2C_2010#Using_the_details_element_with_a_.40noflow_attribute 
 >:

> Using the details element with a @noflow attribute
>
> In cases where, for business or design reasons, it is not acceptable  
> to have a visible button or text description on the page, authors  
> MAY use the @noflow attribute to hide the details UI until it is  
> focused or hovered.
>
> When the @noflow attribute is present on the details element, the  
> element is outside the html flow, and sits at the top-most z-order  
> on the page. It not visible when the page is initially displayed.  
> The button is focusable, and appears in the focus navigation (aka  
> "tab order") following normal rules. When the button recieves focus,  
> it becomes visible. When it loses focus it becomes invisible. The  
> button also appears when the table is hovered. Activiating the  
> details buttong toggles the
> details text, also outside the flow of the page.

I believe that it's possible to get this effect with pure CSS. I made  
two demos to show this. Note: these demos currently only work in  
WebKit-based browsers (including Safari and Chrome). They also work  
with one minor issue in Opera. I am pretty sure it could be tweaked to  
work in other browsers, but this is all I could manage quickly with my  
meager CSS skills.

Also, I encourage A11Y TF members to check out the HTML markup and the  
style provided in an inline <style> element, but you can ignore  
details.js and details.css. Those are included to provide a simulation  
of the <details> element, since it is not yet natively implemented,  
and they do it in a slighly bogus way. So here's the demos:

1) A demo of <details> for a table explanation in a table with a  
visible <caption>:  <http://webkit.org/demos/hover-summary/ 
example1.html>

2) A demo of <details> for a table explanation where there is no  
normally visible caption at all: < http://webkit.org/demos/hover-summary/example2.html 
 >

In both cases, the <details> element will appear if you hover over the  
table, or tab into the <details> control (it accepts keyboard focus).  
The <details> element can be toggled by clicking the caption, clicking  
the triangle, or using the spacebar when it has keyboard focus.


Since the desired effect can be achieved purely with CSS, I think the  
A11Y TF should consider the following points:

A) @noflow as currently defined is a purely presentational attribute.  
It duplicates functionality that can be achieved with CSS. Some in the  
HTML WG are opposed to adding new elements or attributes that are  
purely presentational and do not have any semantic interpretation.

B) Leaving this up to CSS styling gives the author much more control  
over the exact presentation. For example, I chose to have the hover  
description appear right below the table, but an author could choose  
to have it cover the table, appear to the left, have a custom color or  
border, fade in and out gradually using a CSS transition, or all sorts  
of other things. With a special attribute, it's not clear if they  
would have that level of presentational control. Authors in my  
experience are more willing to buy into new ways of doing things when  
they are still totally free to fine-tune the visual appearance.


Therefore, I suggest that the Change Proposal be amended to describe  
the technique for doing this in CSS, instead of adding a dedicated  
@noflow attribute.

The short description of how I did this would be: I made the <details>  
element absolute-positioned, and invisible unless the table has :hover  
or the details has :focus. This is very similar to the well-known Web  
design technique for creating hover menus. Of course, the addition of  
keyboard focus handling makes it much more accessible than many hover  
menus.


Regards,
Maciej