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!