WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible accordion menus

for

From: ben morrison
Date: Mar 10, 2009 4:20AM

On Mon, Mar 9, 2009 at 4:40 PM, Patrick H. Lauke < <EMAIL REMOVED> >wrote:

> On Mon, Mar 9, 2009 at 4:24 PM, Seth Kane < <EMAIL REMOVED> > wrote:
> > I can tell you right now it won't work because display: none omits
> > everything from jaws.
> > http://juicystudio.com/article/screen-readers-display-none.php
> >
> > Try using off page positioning instead if you continue to go this route.
>
> Seth,
>
> not specifically looked at Angela's code, but just as a general rule
> there are situations where display:none is indeed exactly what you
> want to use, rather than off-page techniques. Otherwise, even for a
> sighted keyboard user, you end up with having to tab through all links
> in the hidden panel/submenu/accordion fold/etc. Provided that there's
> an activation link that is clear and then reverts the display:none to
> display:block (as I can spy in Angela's code), that's exactly the
> right way to do it.
>
> IMHO of course,
>


I also use display:none, but to assist with non -js users I use some very
simple JS to add a class of 'jsenabled'
that way we can target display:none like so

.jsenabled .accordion li.closed { display:none;}

Ben
--
Ben Morrison