WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Examples for Implementing Accessible Hide/Show Panels

for

From: Heidi Valles
Date: May 12, 2015 10:18AM

Thank you Bryan and Jonathan!

It sounds like moving focus to a newly opened panel might not be as
disorienting as I thought, and maybe even somewhat expected. Also makes
sense that moving focus is itself the implicit indicator that a panel has
expanded. In the case I'm dealing with now, it would be moving focus to an
iframe at the top of the page.

Thanks for the input!

best,
Heidi


On Tue, May 12, 2015 at 8:35 AM, Jonathan Avila < <EMAIL REMOVED> >
wrote:

> [Heidi wrote]
> > I generally don't like the idea of moving focus automatically, but in
> this case it seems helpful.
>
> In this case the button press is user initiated so it's not really
> happening automatically without the user being aware.
>
> > 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.
>
> If the user were closing a panel the focus should definitely not move.
>
> > Also, I think moving focus might skip the "expanded" feedback from the
> button?
>
> If the user is on an expandable buttons and presses enter and is moved to
> somewhere else the user would expect that they likely were moved to the
> expanded content. So the missing feedback would not be an obstacle IMO.
>
> Jonathan
>
> --
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> <EMAIL REMOVED>
> Phone 703.637.8957
> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Heidi Valles
> Sent: Monday, May 11, 2015 3:54 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Examples for Implementing Accessible Hide/Show Panels
>
> 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-con
> > trol/
> >
> > 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
> > > > > > > > > archives at http://webaim.org/discussion/archives
> > > > > >
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
>
> --
> Arch Inclusive
> http://archinclusive.com
>
> *Make your website work better, for more people.*
> > > at http://webaim.org/discussion/archives
> > > > > >



--
Arch Inclusive
http://archinclusive.com

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