WebAIM - Web Accessibility In Mind

E-mail List Archives

Examples for Implementing Accessible Hide/Show Panels

for

From: Thad C
Date: Apr 25, 2015 10:10PM

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