W3C home > Mailing lists > Public > public-html-comments@w3.org > January 2012

html5, details node, events

From: Michael A. Peters <mpeters@shastaherps.org>
Date: Mon, 02 Jan 2012 07:12:23 -0800
Message-ID: <4F01C957.5050608@shastaherps.org>
To: "public-html-comments@w3.org" <public-html-comments@w3.org>
Hello List,

I currently use the html5 details tag primarily for works cited page. IE:

<a id="stebbins1951"/>
<details class="bibliography" id="dtls_stebbins1951">
    <summary>Stebbins 1951</summary>
    <p>
    <span class="author">Stebbins, Robert C. - 1951</span>
    <br/>
    <span class="title">Amphibians of Western North America</span>
    <br/>
    <span class="publisher">University of California Press</span>
    <br/>
    <span class="plocale">Berkeley, CA</span>
    </p>
</details>

I did not care that most browsers did not understand it, they showed it 
open by default. In Chrome, it made it a lot easier to scroll through 
the works cites page because all the references were closed until the 
user saw one they wanted more information on.

However, it recently came to my attention that chrome does not implement 
details in an accessible way. The tab key passes right over it, leaving 
no method by which someone with difficulty using a mouse to open it.

To remedy the situation, I started work on some JavaScript that will 
emulate details on browsers that do not support it and add an 
accessibility button with aria attributes that toggle emulated or 
genuine details. Emulated details was easy, genuine details was more 
difficult because the accessibility button had to be properly kept in 
sync with the state of the details when a user clicked on the summary to 
open and close the details.

It seems there is no "open" or "close" event that I could attach JS too, 
what I finally ended up doing was using the DOMSubtreeModified event.

That worked, opening or closing the details (either the standard way or 
by clicking the button) triggered scripting attached to 
DOMSubTreeModified to change the state of the accessibility button.

However I understand that event is actually depricated so my code is 
already on a known path to obsolescence.

I see there are all kinds of groovy events for html5 media, was the 
details node just overlooked or is there something I am missing?

Thanks,

Michael A. Peters
Received on Monday, 2 January 2012 15:15:29 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 2 January 2012 15:15:29 GMT