I was trying recently to get the tab order to work on my Visualforce page. I wanted the order to go down the first column, and then back to the top of column 2, and tab down that column. Easy enough right? There is an attribute called taborderhint on inputfields that sets the order of fields selected when you tab:

<apex:pageBlockSection >
<apex:inputField taborderhint="1" value="{!contact.FirstName}"/>
<apex:inputField tabindex="3" value="{!contact.Email}"/>
<apex:inputField taborderhint="2" value="{!contact.LastName}"/>
<apex:inputField taborderhint="4" value="{!contact.Phone}"/>
</apex:pageBlockSection>

But then I needed to add some inputText fields as well. There is no taborderhint attribute on inputtext, but there is an attribute called tabindex which looks like it should do the same thing. But when you do something like this, it doesn’t work:

<apex:pageBlockSection >
<apex:inputField taborderhint="1" value="{!contact.FirstName}"/>
<apex:inputText tabindex="3" value="{!contact.Email}"/>
<apex:inputField taborderhint="2" value="{!contact.LastName}"/>
<apex:inputField taborderhint="4" value="{!contact.Phone}"/>
</apex:pageBlockSection>

After scratching my head for while, and reading about various JS solutions, I finally uncovered this post on the community boards. After some impressive digging in the dev console, the user discovered that taborderhint multiples the hint by 10 – so 1 is actually being set as 10. But the same behavior is not used for tabindex. So you have to account for that when you set the values – and when you do, it all works:

<apex:pageBlockSection >
<apex:inputField taborderhint="1" value="{!contact.FirstName}"/>
<apex:inputText tabindex="30" value="{!contact.Email}"/>
<apex:inputField taborderhint="2" value="{!contact.LastName}"/>
<apex:inputField taborderhint="4" value="{!contact.Phone}"/>
</apex:pageBlockSection>

Seems odd behavior to me, but at least it works I guess!