WebAIM - Web Accessibility In Mind

E-mail List Archives

jquery accordion question

for

From: Mike Warner
Date: May 20, 2015 2:37PM

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.