|Getting <tabindex> right in HTML5|
More fiddly than you might think...
| 5:02 pm on May 28, 2014 (gmt 0)|
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:
and I want the visitor to be able to tab through them in this order:
but instead what I am currently getting is:
[CC] (2) (4)
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!
| 7:23 pm on May 28, 2014 (gmt 0)|
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.
| 7:59 pm on May 28, 2014 (gmt 0)|
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.
| 11:49 pm on May 28, 2014 (gmt 0)|
|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.
| 12:25 am on May 29, 2014 (gmt 0)|
Yep, that would do it!
I couldn't see through the fog, but that's perfect.
Thank you, Fotiman!