homepage Welcome to WebmasterWorld Guest from 54.167.174.90
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Getting <tabindex> right in HTML5
More fiddly than you might think...
ronin

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4675455 posted 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:

[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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4675455 posted 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.

ronin

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4675455 posted 7:59 pm on May 28, 2014 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4675455 posted 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.

ronin

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4675455 posted 12:25 am on May 29, 2014 (gmt 0)

Yep, that would do it!

Brilliant.

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

Thank you, Fotiman!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved