- From: T.J. Crowder <tj@crowdersoftware.com>
- Date: Mon, 2 Jan 2012 16:01:10 +0000
- To: "Michael A. Peters" <mpeters@shastaherps.org>
- Cc: "public-html-comments@w3.org" <public-html-comments@w3.org>
- Message-ID: <CAH65x-wUcT-h=0jR2DVi6sXXwZfktODwVZWkAozmjbPmnEzWtg@mail.gmail.com>
Agree there should be an event specified that is fired when the element is expanded/collapsed. (Off-topic: I didn't see a bug report for the lack of a keyboard mechanism for `details` in the Chrome issues list, so I created one: http://code.google.com/p/chromium/issues/detail?id=108938 You can add the element to the tab order in the usual way [tabindex="0"], which solves half the problem, but once you're on the element I can't find a keyboard mechanism to open it.) -- T.J. Crowder Independent Software Engineer tj / crowder software / com www / crowder software / com On 2 January 2012 15:12, Michael A. Peters <mpeters@shastaherps.org> wrote: > 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 16:24:07 UTC