WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Examples for Implementing Accessible Hide/Show Panels


From: Steve Faulkner
Date: Apr 28, 2015 1:19AM

Bulletproof HTML5 <details> fallback using jQuery

disclosure-button custom control

HTML5 - details/summary demo

HTML5 - details/summary polyfill example used in w3c specs



HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>;

On 26 April 2015 at 05:10, Thad C < <EMAIL REMOVED> > wrote:

> Greetings Group,
> I am looking for examples of accessible hide/show panels. The following
> Open Ajax Alliance examples seem to illustrate the functionality I am
> looking for:
> http://www.oaa-accessibility.org/examplep/hideshow1/
> In this example a user activates the "Hide Topic 1" button, the associated
> panel is shown, focus goes to the associated panel however the content
> inside *is not* read by assistive technology
> However if a user activates the "Hide Topic 2" button, the associated panel
> is shown, focus goes to the associated panel and the content inside* is*
> read by assistive technology. This is the behavior I would like to emulate.
> Can anyone give me a technical explanation of why the "Hide Topic 2"
> scenario reads the content inside the panel and the "Hide Topic 1" does
> not?
> If anyone has other example of this functionality it would be greatly
> appreciated as well
> Thanks for your help
> > > > >