Getting <tabindex> right in HTML5

More fiddly than you might think...

[ronin]

I'm working on an HTML5 project

(I'm writing it using a graceful degradation approach, but, that said, it doesn't need to work in legacy browsers).

I want to make the site as accessible as possible. Before I get started on ARIA, I want to make the site entirely navigable by keyboard, so I'm learning how <tabindex> works in HTML5.

I understand that in HTML 4.01, the tabindex attribute could be attached only to <a>, <area>, <button>, <input>, <object>, <select> and <textarea>, while in HTML5, the tabindex attribute can be attached to any element.

So... I have these elements on the page:

[AA]
[BB]
[CC]
[DD]
[EE]
[FF]

and I want the visitor to be able to tab through them in this order:

[AA] (1)
[BB] (3)
[CC] (2)
[DD] (4)
[EE] (5)
[FF] (6)

but instead what I am currently getting is:

[AA] (1)
[BB] (3)
[CC] (2) (4)
[DD] (5)
[EE] (6)
[FF] (7)

As you can see, it's tabbing over [CC] twice.

Because, instead of attaching tabindex="1", tabindex="2", tabindex="3" etc., I have only attached tabindex="1" to [AA], tabindex="2" to [CC] and then tabindex="0" to [BB],[DD],[EE] & [FF].

N.B. tabindex="0" means "tabbable" but with no specific index order number outside the normal flow of the document. [BB],[DD],[EE] & [FF] are all <h2>s. <h2> is not tabbable by default - it needs to have a tabindex declared or the tab button will just skip over it.

So... I'm sure you can see what's happening. The browser directs the first tab to [AA] (which has a specifically numbered tabindex), then tabs to [CC] (which has a specifically numbered tabindex) and then continues to [BB] (tabindex="0") and continues down the document elements (all tabindex="0") following the normal flow of the document.

How (on earth) can I get it to jump from [BB] to [DD]?

Thanks in advance for your help!

[Fotiman]

Wouldn't you just give [DD] tabindex="4"? If you explicitly want it to tab from one element to another, then I don't think you really want it to have a tabindex of 0.

[ronin]

Thanks, Fotiman.

Tabindex="0" is okay... it just indicates "tabbable and in the normal document flow"...

The reason I can't give [DD] a tabindex="4" is because then the browser would always tab from [BB] to [DD].

When the [BB] <h2> is clicked on it opens up (like an accordion) and there are a number of tabbable elements ([BC],[BD],[BE] etc.) below it - that's why I can't have [BB] with tabindex="3" and [DD] with tabindex="4".

Otherwise I'd give each element from [AA] to [FF] a specific tabindex and there would be no problem. (I tried that first and then realised that it meant the browser would always skip the child elements ([BC],[BD],[BE] etc.)

I need something which says [CC] is tabindex="2" and otherwise tabindex="-1" (programmatically but not manually tabbable)...

... of course this may not be possible. The whole tabindex model seems only half-thought through.

Frankly, I'd be much happier with a fully comprehensive nav-index: CSS3 module.

[Fotiman]

When the [BB] <h2> is clicked on it opens up (like an accordion)

Then it sounds like you need to set the tabindex on DD when BB is opened to 0, and when BB is closed, set tabindex on DD to 4.

[ronin]

Yep, that would do it!

Brilliant.

I couldn't see through the fog, but that's perfect.

Thank you, Fotiman!