WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Examples for Implementing Accessible Hide/Show Panels

for

From: Heidi Valles
Date: May 11, 2015 1:53PM

Bryan,

What are your thoughts on moving focus from the button to the panel if the
panel does not immediately follow the toggle button? For example, a panel
slides down from the top of the page.

I generally don't like the idea of moving focus automatically, but in this
case it seems helpful. Though at the same time, not helpful if the user
doesn't want to move into the panel contents, and just wishes to
toggle-close and move on. Also, I think moving focus might skip the
"expanded" feedback from the button?

I thought about a hidden "jump to panel" link that follows the toggle, but
feel like it would be easily missed.

Thanks!
heidi




On Tue, Apr 28, 2015 at 3:19 AM, Steve Faulkner < <EMAIL REMOVED> >
wrote:

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



--
Arch Inclusive
http://archinclusive.com

*Make your website work better, for more people.*