WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: jquery accordion question

for

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


Sorry! Accidentally pasted the same link twice
http://jsbin.com/fojobe/1/edit?html,output is the correct example link

On Wed, May 20, 2015 at 4:51 PM, Alexander Schmitz < <EMAIL REMOVED> >
wrote:

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