E-mail List Archives
Thread: jquery accordion question
Number of posts in this thread: 5 (In chronological order)
From: Mike Warner
Date: Wed, May 20 2015 2:37PM
Subject: jquery accordion question
No previous message | Next message →
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.
From: Alexander Schmitz
Date: Wed, May 20 2015 2:51PM
Subject: Re: jquery accordion question
← Previous message | Next message →
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 ADDRESS 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.
> > > > >
From: Alexander Schmitz
Date: Wed, May 20 2015 2:52PM
Subject: Re: jquery accordion question
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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.
>> >> >> >> >>
>
>
From: Léonie Watson
Date: Wed, May 20 2015 3:15PM
Subject: Re: jquery accordion question
← Previous message | Next message →
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Mike Warner
Sent: 20 May 2015 21:38
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.
<SNIPPED>
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?
It's the design pattern recommended in the ARIA Authoring Practices Guide [1]. It also makes the widget more usable with a keyboard because it removes the un-necessary tabbing - it might only be a few tab stops, but a few here and a few there quickly add up in the scheme of things.
Léonie.
[1] http://www.w3.org/TR/wai-aria-practices/#tabpanel
From: Bryan Garaventa
Date: Thu, May 21 2015 10:57AM
Subject: Re: jquery accordion question
← Previous message | No next message
> It's the design pattern recommended in the ARIA Authoring Practices Guide [1]. It also makes the widget more usable with a keyboard because it removes the un-necessary tabbing - it might only be a few tab stops,
> but a few here and a few there quickly add up in the scheme of things.
This is an open bug with ARIA APG 1.0 and hasn't yet been addressed in 1.1.
Reference: https://www.w3.org/Bugs/Public/show_bug.cgi?id&254