How can I reorder the tab order of two elements in the middle of the page?

Issue

I have a dynamic web page, and I need to reorder the tab order of two elements some place in the content. I really don't want to set the tab index for every preceding element to achieve this. Is it possible to assign a tab index to an element relative to it's position in the DOM, thus keep the natural tab order for the rest of the elements?

Give the following elements:

<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
<a>Link4</a>
<a>Link5</a>

The natural tab order here is Link 1, 2, 3, 4, 5. Is it possible to change the tab order to 1, 2, 3, 5, 4 without setting the tab index for 1, 2 and 3 also?

In the real context, I need to rearrange two elements following an expanding menu, so I don't know the numeric value of the tab index.

Solutions based on javascript/jquery are also welcome.

Solution

You can't work your way around this without changing the tabindex stack. However, you can pretty easily write a small plugin that takes focus and change it to something else. It's messy, though, and I'd strongly recommend against it.

What you can do, however, is have a tabindex-stack above and below. Say all objects above these items in the DOM could have tabindex 10, and all objects below could have tabindex 30.

For the items you're listing, you could force tab index between 20 and 29. Like this:

Over:

<div></div>
<div></div>
<div></div>
<div></div>

Your range:

<a tabindex="20">Link1</a>
<a tabindex="20">Link2</a>
<a tabindex="20">Link3</a>
<a tabindex="20">Link4</a>
<a tabindex="20">Link5</a>

Under:

<domobject tabindex="30"/>
<domobject tabindex="30"/>
<domobject tabindex="30"/>
<domobject tabindex="30"/>

This would force tabbing to go through the DOM in the correct order. However, if you include untabindex'ed objects along the way, they'll get the same tab index as the first block - making everything odd and strange.

If you want to switch the tab index of your range, you can change it accordingly, within the 'buffer range' that you have (20-29 in the example):

<a tabindex="25">Link1</a>
<a tabindex="24">Link2</a>
<a tabindex="23">Link3</a>
<a tabindex="22">Link4</a>
<a tabindex="21">Link5</a>

It's messy as hell.

The jQuery option is messy also, but it's a lot cleaner (and easier to maintain).

Answered By - hnilsen