Why does IE ignore the 'tab position' when tabbing through a webpage unless 'tabindex' is used?

Question

I'm using shortcut links to speed up tabbing through a webpage, which works fine in Chrome and Firefox.

Here's the Fiddle demonstrating my issue.

When using Skip links to change the 'tab location', then pressing the TAB key, most browsers continue jumping sequentially on focusable interactive or tabindex-wielding elements from that point onwards:

<div class="skiplinks">
    <a href="#nav">Skip to Navigation</a>
    <a href="#search">Skip to Search</a>
    <a href="#anchor">Skip to anchor</a>
</div>

<div id="wrapper">
    <p>Some boring content containing <a href="#">a selectable link</a>.</p>
    <ul id="nav">
        <li><a href="#">link 1</li>
        <li><a href="#">link 2</li>
        <li><a id="anchor">anchor with no href</li>
    </ul>
    <form id="search">
        <input type="search" id="search-field" />
    </form>
</div>

In this example, when the links are clicked the 'Tab position' is moved to that location in the document. Pressing TAB will then jump to the next focusable element after the Skip link's target - try this demo.

Unless you're using IE. IE only seems to respect changes in the 'Tab position' if they involve focusing on an interactive element OR an element with a tabindex attribute defined. This means anchor tags being used as a 'fragment', or location anchor, also do not result in the tabindex being updated.

In the example above, selecting a Skip link then hitting TAB simply jumps back to the first link on the page. Selecting 'Skip to anchor' then 'Tab' also jumps back to the top. This quirk seems to affect IE 8-11.

Ok, so why not just point the skiplinks directly to an interactive element rather than the wrapper? I tried that, which coincidentally solved the bug in IE, and introduced it in Firefox. And I'll be damned if I prioritise IE over FF.

Am I just missing something really obvious?

---

UPDATE

I've since solved this issue, the solution was to only create fragment/skip links that point to <a> tags that have a negative tabindex value assigned:

<a href="#destination">Skip to somewhere down the page</a>

<a id="destination" tabindex="-1"></a>

Works in Chrome, FF and IE.

Answer 1

As i mentioned in my comment, div is not a tabstop (it can have focus, but it's not a tabstop). For Internet Explorer, the following elements are focusable, but not represent a tabstop: applet, div, frameset, span, table and td (source MSDN). In modern broswers, but not in old ones, you can use any element with a defined id as an anchor - and a tabstop too - but not for Internet Explorer 11. The only elements that represent tabstops for Internet Explorer are: a, body, button, frame, iframe, img, input, isIndex (deprecated element), object, select and textArea. So the best solution to jump to a tabstop is to use one of those elements or the more obvious one, an anchor link. An anchor link is an a element with an id and without the href: <a id="tabstop"></a>. The problem, or the bug, is that for Internet Explorer 11, anchor links without an href (it only needs to be defined, it can be empty) don't act like tabstops. So the best solution is to use an anchor link without an empty (or #) href.

In the following snippet, the "skip to DIV" link will jump to the first div, so on Internet Explorer 11 it won't represent a tabstop; using tab will cycle over all the links in the page. The "skip to ANCHOR" link will jump to an anchor link, and after the bugfix, the anchor link will represent a tabstop, so pressing tab will make the cursor jump to the next tabbable element: the input.

<div class="skiplinks">
		<a href="#wrapper">Skip to DIV</a>
		<a href="#anchor">Skip to ANCHOR</a>
	</div>
	
	<div id="wrapper">
		<p>Some boring content containing a selectable <a href="#">link</a>.</p>
		<ul id="nav">
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 2</a></li>
			<li><a id="anchor" href="">anchor with href</a></li>
		</ul>
		<form id="search">
			<input type="search" id="search-field" />
		</form>
	</div>

Hope it helps.