WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Examples for Implementing Accessible Hide/Show Panels

for

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

Bulletproof HTML5 <details> fallback using jQuery
https://mathiasbynens.be/notes/html5-details-jquery

disclosure-button custom control
http://www.paciellogroup.com/blog/2014/05/disclosure-button-custom-control/

HTML5 - details/summary demo
http://codepen.io/stevef/pen/jiCBE

HTML5 - details/summary polyfill example used in w3c specs
http://www.w3.org/TR/html-aam-1.0/#html-element-role-mappings


--

Regards

SteveF
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
> > > > >