WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: jquery accordion question

for

From: Alexander Schmitz
Date: May 20, 2015 2:51PM


Hi Mike,

The jQuery UI accordion follows the aria best practices for interaction
with an accordion.

https://w3c.github.io/aria/practices/aria-practices.html#accordion-1

you can see this behavior here
https://w3c.github.io/aria/practices/aria-practices.html#accordion-1

I have added a few inputs inside the panels so you can see the tabbing in
and out of the active panel behavior.
Hope this answers your question!


Alexander Schmitz
jQuery Foundation

On Wed, May 20, 2015 at 4:37 PM, Mike Warner < <EMAIL REMOVED> > wrote:

> Hi all,
>
> I'm looking at our jquery accordion items, and was surprised that I
> couldn't tab from header to header, as you would in any other tab-type
> interface. By default, only the first clickable header has a tabindex of
> 0, the rest are tabindex=-1. For me, that's not very intuitive, since in
> all other tab interfaces, all of the tabs are reachable via the tab key.
>
> The jquery team was asked about this and said:
>
> "The currently active header has a tabindex of 0. The other headers have a
> tabindex of -1. This makes it so that when you tab into the accordion, the
> next tab press will move out of the accordion (the entire accordion is
> treated as one component). The arrow keys should be used to move between
> headers when the accordion is active. "
>
> That may be rooted an old Firefox bug from 2008 or 9 where it didn't
> properly handle tabindex=0.
>
> I just wonder how intuitive that is for a screen reader user or keyboard
> nav-user? The only difference with having tabindex=0 is that you have to
> tab a few more times to get out of the component.
>
> Has anyone run across this and have a good reason for either tabindex of -1
> or 0 for all headers?
>
> Thanks,
> Mike
>
>
> Mike Warner
> Director of IT Services
> MindEdge, Inc.
> > > > >