What is the HTML tabindex attribute?

Question

What is the tabindex attribute used for in HTML?

score 311 · Answer 1 · edited Apr 29 '19 at 18:04

311

tabindex is a global attribute responsible for two things:

it sets the order of "focusable" elements and
it makes elements "focusable".

In my mind the second thing is even more important than the first one. There are very few elements that are focusable by default (e.g. <a> and form controls). Developers very often add some JavaScript event handlers (like 'onclick') on not focusable elements (<div>, <span> and so on), and the way to make your interface be responsive not only to mouse events but also to keyboard events (e.g. 'onkeypress') is to make such elements focusable. Lastly, if you don't want to set the order but just make your element focusable use tabindex="0" on all such elements:

<div tabindex="0"></div>

Also, if you don't want it to be focusable via the tab key then use tabindex="-1". For example, the below link will not be focused while using tab keys to traverse.

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

edited Apr 29 '19 at 18:04

vancy-pants

1,070
12
13

answered Sep 25 '13 at 09:01

Konstantin Smolyanin

17,579
12
56
56

3

I found out that `
` also works. Is there a reason not to use that?
– danijar Jun 21 '14 at 14:50
5

Using tabindex of -1 is convenient for things like skip links. You can make an item link to a something right above the content you are trying to link the user down to without having the linked to item itself be reachable. – Brett Jan 24 '15 at 13:37
5

Worth noting -- and the answer should probably be corrected -- that the value `-1` is not suitable when you "don't want it to be focused", but rather when you want to prevent focus as result of keyboard navigation. The element can still be focused, just not with keyboard. – Armen Michaeli Jul 21 '16 at 16:59
3

@danijar yes: it's a spec violation. Per https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute, *"The tabindex attribute, if specified, must have a value that is a valid integer"*. – Mark Amery Mar 26 '17 at 20:46
That `-1` is the end of my research for a solution for items that had an absolute position and behaving funnily when focused by the tab! HOorraaayyyyy. – John Mutuma Oct 01 '18 at 13:49

score 55 · Answer 2 · edited Feb 26 '14 at 12:02

55

When the user presses the tab button the user will be taken through the form in the order 1, 2, and 3 as indicated in the example below.

For example:

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

edited Feb 26 '14 at 12:02

RST

3,899
2
20
33

answered Nov 06 '10 at 08:37

Robert

589
4
7

-->What if the tabindex is -1? What does it mean? – Sep 01 '14 at 07:16
8

@AlyssaGono you seem to have not read the answer with 85 upvotes... tabindex of -1 means that you cannot reach that element with pressing the tab button – John Ruddell Jan 08 '15 at 19:33

score 26 · Answer 3 · edited Nov 22 '16 at 18:19

The tabindex is used to define a sequence that users follow when they use the Tab key to navigate through a page. By default, the natural tabbing order will match the source order in the markup.

The tabindex content attribute allows authors to control whether an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation, and what is to be the relative order of the element for the purposes of sequential focus navigation. The name "tab index" comes from the common use of the "tab" key to navigate through the focusable elements. The term "tabbing" refers to moving forward through the focusable elements that can be reached using sequential focus navigation.
W3C Recommendation: HTML5
Section 7.4.1 Sequential focus navigation and the tabindex attribute

The tabindex starts at 0 or any positive whole number and increments upward. It's common to see the value 0 avoided because in older versions of Mozilla and IE, the tabindex would start at 1, move on to 2, and only after 2 would it go to 0 and then 3. The maximum integer value for tabindex is 32767. If elements have the same tabindex then the tabindex will match the source order in the markup. A negative value will remove the element from the tab index so it will never be focused.

If an element is assigned a tabindex of -1 it will remove the element and it will never be focusable but focus can be given to the element programmatically using element.focus().

If you specify the tabindex attribute with no value or an empty value it will be ignored.

If the disabled attribute is set on an element which has a tabindex, the element will be ignored.

If a tabindex is set anywhere within the page regardless of where it is in relation to the rest of the code (it could be in the footer, content area, where-ever) if there is a defined tabindex then the tab order will start at the element which is explicitly assigned the lowest tabindex value above 0. It will then cycle through the elements defined and only after the explicit tabindex elements have been tabbed through, will it return to the beginning of the document and follow the natural tab order.

In the HTML4 spec only the following elements support the tabindex attribute: anchor, area, button, input, object, select, and textarea. But the HTML5 spec, with accessibility in mind, allows all elements to be assigned tabindex.

--

For example

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

is the same as

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

because regardless of the fact that they are all assigned tabindex="1", they will still follow the same order, the first one is first, and the last one is last. This is also the same..

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

because you do not need to explicitly define the tabIndex if it's default behavior. A div by default will not be focusable, the anchor tags will.

What versions of IE and Mozilla start the `tabindex` at **1** instead of **0** ? — arminrosu, Feb 13 '17 at 13:55
-1; this answer is a little confused. You mention that "older versions" of IE and Firefox have tabbing start at tabindex 1 instead of tabindex 0... but that's what *all* browsers do, as required by the spec! You also contradict yourself, first saying *"the `tabindex` starts at 0"* but then later saying *"the tab order will start at the element which is explicitly assigned the lowest `tabindex` value above 0"*. — Mark Amery, Mar 26 '17 at 20:59

score 18 · Answer 4 · edited May 02 '13 at 22:14

18

Controlling the order of tabbing (pressing the tab key to move focus) within the page.

Reference: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

edited May 02 '13 at 22:14

Community

1
1

answered Nov 06 '10 at 07:12

Tom

43,583
4
41
61

6

Also, having tabindex makes an element selectable by mouse click. (Adds dotted outlines, can be styled using `:focus`) – user123444555621 Nov 06 '10 at 07:46
@Pumbaa80 You can can select any input element by mouse click anyway, and the same goes for using the ":focus" CSS. The tabindex attribute is optional. – Drew Mar 02 '11 at 12:12
6

That goes for input elements only. My comment applies to any type of element. See http://jsfiddle.net/XsYCj/ for an example. – user123444555621 Mar 02 '11 at 14:36

score 8 · Answer 5 · answered Aug 15 '13 at 09:31

the values you set determine the order that your keyboard focus will move between elements on the website.

In the following example, the first time you press tab, your cursor will move to #foo, then #awesome, then #bar

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

If you have not defined tab indexes anywhere, the keyboard focus will follow the HTML tags of you page in the order in which they are defined in the HTML document.

If you tab more times than you have specified tabindexes for, the focus will move as if there were no tabindexes, i.e. in the order of appearance of the HTML tags

score 3 · Answer 6 · answered Nov 06 '10 at 07:11

3

It can be used to alter the default form element focus navigation sequence.

So if you've got:

text input A

text input B

submit button C

by using the tab key you navigate through A->B->C. Tabindex allows you to change that flow.

answered Nov 06 '10 at 07:11

cherouvim

31,725
15
104
153

score 3 · Answer 7 · answered Nov 06 '10 at 07:16

Normally, when the user tabs from field to field in a form (in a browser that allows tabbing, not all browsers do) the order is the order the fields appear in the HTML code.

However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using TABINDEX. The tabs then flow in order from lowest TABINDEX to highest.

More info on this can be found here w3

another good illustration can be found here

score 2 · Answer 8 · answered Mar 20 '15 at 00:11

2

In Simple words, tabindex is used to focus on elements. Syntax: tabindex="numeric_value" This numeric_value is the weight of element. Lower value will be accessed first.

answered Mar 20 '15 at 00:11

Aman Dhanda

438
4
15

*"Lower value will be accessed first."* - not quite true; 0 and negative values have special meanings. – Mark Amery Mar 26 '17 at 21:01

score 1 · Answer 9 · answered May 04 '18 at 09:12

The HTML tabindex atribute is responsible for indicating if an element is reachable by keyboard navigation. When the user presses the Tab key the focus is shifted from one element to another. By using the tabindex atribute, the tab order flow is shifted.

score 0 · Answer 10 · answered Nov 06 '10 at 07:13

0

Tabbing through controls usually happens sequentially as they appear on the HTML code.

Using tabindex, the tabbing will flow from control with the lowest tabindex to the control with the highest tabindex in tabindex sequential order

answered Nov 06 '10 at 07:13

Kamal

2,512
2
34
48

What is the HTML tabindex attribute?

10 Answers10

For example

Linked