Ever stop to think, and forget to start again?
Tabindex At Your Peril
Tabindexing allows a designer to specify the order in which links or controls receive focus on a page when using the TAB key to move around.
For example:
<ul>
<li><a href="one.html" tabindex="1">Item 1</a></li>
<li><a href="two.html" tabindex="2">Item 2</a></li>
</ul>
Elements on a page that do not have an associated tabindex will have a ‘natural’ ordering (ie they will follow the order that they appear in the markup). If you mix the two, the elements with a specified tabindex will come first, in their specified order, followed by unindexed elements in their natural (markup) order.
So this markup:
<ul>
<li><a href="one.html">Item 1</a></li>
<li><a href="two.html">Item 2</a></li>
<li><a href="three.html" tabindex="2">Item 3</a></li>
<li><a href="four.html" tabindex="1">Item 4</a></li>
</ul>
would result in the following order when tabbing through the list of links:
Item 4
Item 3
Item 1
Item 2
Although the markup is completely legitimate, I think you’ll agree that the end result, from the user’s perspective, is pretty awful.
Speaking as an intermittent keyboard navigator/VR user, I consider tabindexing to be the spawn of satan – especially when it does run contrary to the ‘natural’ or expected tab order on a page.
For example, if I land on a page which renders some content containing a few links followed by a form, I expect to be able to tab to the links first followed by the forum controls.
One common use of tabindexing that I come across in this situation gives preference to the form controls and leaves the links unindexed. So, when I hit the TAB key expecting to jump to the first link, I actually end up on the form and often have to tab through the whole thing to get back to the links which, visually, are actually higher up the page. The end result (especially if there is a lack of visual highlighting on focus) is often complete disorientation and exasperation.
On really bad pages, I sometimes have to rely on reading the browser status bar just to try and figure out where I’m tabbing to!
If I had one thing (OK- one thing amongst many) to ask of other designers it would be “Please don’t create tab orders that are unintuitive!
“. Users (in the West, anyway) expect tab ordering to follow a ‘left-to-right, top-to-bottom rule’.
As soon as you mess with that, far from helping, all you will do is create confusion.
Yes, tabindex can be a perilous thing to use. It should either be not used at all, or used for ever tabindex-able element, and here in lies a problem: if you have not created every single part of the page (a CMS or blog may add nagivation or other bits), you can end up in trouble.
So, to take it a step further, either don’t use it at all, or only use it if your document is static HTML and you are prepared to tabindex every appropriate element, and then actually test it.
I’ve used tabindex just once – for an automatically generated form where every entry had a corresponding help button which triggered a popup showing more information about what was to be entered. I moved the help buttons out of the normal tab sequence so that filling out the form was easier for keyboard users. I felt uncomfortable about doing so but I didn’t have a better answer for the problem.
The resultant tab order wasn’t so very unnatural – top to bottom down a column of input controls then top to bottom down the next column where the help buttons were placed, but I suspect it did confuse some users.
Personally, when keyboard navigating, I expect the focus to move down the page until it reaches the foot and then jump straight back to the top again. Any different behaviour creates confusion – albeit only temporary sometimes – especially if it is combined with a lack of visual onfocus changes.
That said, I can appreciate your dilemma in that particular situation. Unwanted popups spontaneously appearing when you TAB through a page also makes for very disconcerting web browsing. But what happened when a keyboard navigator needed to access help partway through the form? Presumably they’d have to TAB through all of the remaining inputs and some of the help buttons to reach the one they needed. And then TAB all the way back to their original input again.
Ideally, I’d have like to have seen all of the Help tips on a separate page complete with appropriate anchors and links back to the relevant input. Then each input could have had a small link next to it to the appropriate section. Since this link wouldn’t be activated by TAB, keyboard navigators would only have had one extra keypress per input to deal with – which would have been a very minor inconvenience compared to a confusing tab order.