How to ignore HTML element from tabindex?

The Question :

377 people think this question is useful

Is there any way in HTML to tell the browser not to allow tab indexing on particular elements?

On my page though there is a sideshow which is rendered with jQuery, when you tab through that, you get a lot of tab presses before the tab control moves to the next visible link on the page as all the things being tabbed through are hidden to the user visually.

The Question Comments :

The Answer 1

616 people think this answer is useful

You can use tabindex="-1".

The W3C HTML5 specification supports negative tabindex values:

If the value is a negative integer
The user agent must set the element’s tabindex focus flag, but should not allow the element to be reached using sequential focus navigation.


Watch out though that this is a HTML5 feature and might not work with old browsers.
To be W3C HTML 4.01 standard (from 1999) compliant, tabindex would need to be positive.


Sample usage below in pure HTML.

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />

The Answer 2

125 people think this answer is useful

Don’t forget that, even though tabindex is all lowercase in the specs and in the HTML, in Javascript/the DOM that property is called tabIndex.

Don’t lose your mind trying to figure out why your programmatically altered tab indices calling element.tabindex = -1 isn’t working. Use element.tabIndex = -1.

The Answer 3

11 people think this answer is useful

If these are elements naturally in the tab order like buttons and anchors, removing them from the tab order with tabindex=-1 is kind of an accessibility smell. If they’re providing duplicate functionality removing them from the tab order is ok, and consider adding aria-hidden=true to these elements so assistive technologies will ignore them.

The Answer 4

8 people think this answer is useful

If you are working in a browser that doesn’t support tabindex="-1", you may be able to get away with just giving the things that need to be skipped a really high tab index. For example tabindex="500" basically moves the object’s tab order to the end of the page.

I did this for a long data entry form with a button thrown in the middle of it. It’s not a button people click very often so I didn’t want them to accidentally tab to it and press enter. disabled wouldn’t work because it’s a button.

The Answer 5

4 people think this answer is useful

Such hack like “tabIndex=-1” not work for me with Chrome v53.

This is which works for chrome, and most browsers:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}
<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>

The Answer 6

3 people think this answer is useful

The way to do this is by adding tabindex="-1". By adding this to a specific element, it becomes unreachable by the keyboard navigation. There is a great article here that will help you further understand tabindex.

The Answer 7

2 people think this answer is useful

Just add the attribute disabled to the element (or use jQuery to do it for you). Disabled prevents the input from being focused or selected at all.

Add a Comment