How to ignore HTML element from tabindex?

Question

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.

Coastguardsman

Answer 1

You can use tabindex="-1".

Only do this if you are certain it does not remove functionality for keyboard users.

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.

<a href="#" onclick="return false">Focusable</a>
<a tabindex="-1" href="#" onclick="return false">Not focusable</a>
<a href="#" onclick="return false">Focusable</a>

Accompanist

It appears Google Chrome does not support the -1, which makes sense since technically tabIndex only supports 0 -32767 according to linkW3. So when I did this; I used 500. Hackish; but worked. – Calvinna

@Calvinna As of version 23, Google Chrome supports -1 on tabindex. Not sure how long ago that happened, perhaps prior to 23. I tested "-1" in Chrome 23, Firefox 18, IE8, IE9, and Opera 12.11 and it worked across the board. – Ladew

I've edited the answer to link to the updated HTML5 specification. tabindex now allows to have negative values. – Prohibition

@JamesDonnelly Thank you for your edit. I re-added the reference to the W3C HTML4 spec for browser compability. – Accompanist

Supported since IE 5.01 msdn.microsoft.com/en-us/library/ie/ms534654(v=vs.85).aspx – Megilp

@jimmykup Chrome 38, tabindex=-1 participates in tab stop round robin. – Pointing

Also start off your tab index with 1, not 0 like some references say is OK. It's not. – Sagacious

@MikeBethany Interesting - do you have a source? – Accompanist

@Martin Yes, here are examples. Tabindex 0: gist.github.com/mikbe/e4b68c89f678556afd8e -- Tabindex 1: gist.github.com/mikbe/6cb1254a3cca53a2b8d2 -- Notice the tabindex 0 version jumps from the tabindex 0 to the address bar while tabindex 1 version properly goes from 1 to 2. – Sagacious

@MikeBethany I meant a source, a reference, an official statement, a w3 link or similar, but your claim is empirical and maybe not applicable for all browsers. – Accompanist

@Martin "...and maybe not applicable for all browsers." And that's my point. Your tabindex should work with all browsers so if one of the major browsers has an issue you have to code for that. I also only care about empirical facts, I don't care about hypotheticals. – Sagacious

See my answer which works for almost all modern chrome, and for most browsers. https://mcmap.net/q/80494/-how-to-ignore-html-element-from-tabindex – Octad

Note for GWT developers. Since GWT has special handling for -1 value, set any offer negative value (e.g. tabIndex="-2") – Maghutte

Ok, and what is GWT ? – Edy

Answer 2

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.

Gauze

This seems like it should be a comment not an answer. – Locality

Eh, I was glad to read it, and I probably would have missed it if it were buried as a comment. – Fun

Answer 3

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.

Covering

Answer 4

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.

Emphasize

Answer 5

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.

Neoimpressionism

Which version of Chrome? – Neoimpressionism

Chrome 49.0.2623.75 (64 bit). – Pushbike

My version is 51.0.2704.103. Check out this fiddle. You might have the wrong code, you never know. – Neoimpressionism

@AtulChaudhary, how doesn't it work? You can still focus it? – Neoimpressionism

once the fields are disabled they remain disabled and it is an issue in IOS9 but seems to be working in IOS10 – Brechtel

For reference, disabled also disables clicking of the element, seemingly. – Edy

Answer 6

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.

Juratory