Consider a web page that contains a form which includes two sets of addresses – one for billing and another for shipping. They render side by side, each in their own table cells, like this:

The Country field is a select dropdown.

Without using the tabindex attribute pressing tab simply hops from one address line to the next in the same row, which makes life a little difficult for people who want to enter the entire billing address and then move to shipping.

So you add tabindex attributes (see the W3C recommendation). Except..

Safari doesn’t like ‘em completely. Firstly tabindex on selects are ignored. Secondly, Safari tabs to the next highest tabindex as rendered, so if all the Billing tabindexes are given ‘1’ and the Shipping tabindexes are given ‘2’, when you get to Postcode and tab, Safari goes to the Postcode field for Shipping and not Address Line 1. The workaround is to make the tabindexes for Shipping all ‘2’, except for Postcode, which is ‘3’. Strange but true.

So what about Firefox? Well, Firefox is, out of the box, similarly screwed up. To fix it..

• Type about:config in the URL bar.
• In the Filter field, type tabfocus.
• Double-click on the accessibility.tabfocus preference.
• Change the value to 7.
• Restart Firefox.

(Ironic that something to aid accessibility is so obscured.)

Then Firefox behaves as per the specification. Except then tabbing on the last field with a positive tabindex hops you back to the location bar rather than the next field without a tabindex. Grief.

Anyhow, let’s ignore that problem for the moment. If you put the tabindex into the selects, Safari also screws up because it will ignore the special tabindex you’ve added to the Country field in Address Shipping, thus invoking the first Safari observation which required the first workaround.

Or so I thought. In Safari, you have to enable the ‘Press Tab to highlight each item on webpage’ preference. Then Safari works fine. But, of course, you cannot rely on users configuring their browsers in specific ways.

So, the workaround to that is to give each tabindex a unique number. Hey everyone: “Elements that have identical tabindex values should be navigated in the order they appear in the character stream.” Nah. Forget it. And Firefox still goes and does that weird hop-to-the-location-bar thing.

I hate to think what IE does.