WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: jquery accordion question


From: Léonie Watson
Date: May 20, 2015 3:15PM

From: WebAIM-Forum [mailto: <EMAIL 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.


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.


[1] http://www.w3.org/TR/wai-aria-practices/#tabpanel