Where do tabindex="0" HTML elements end up in the tabbing order?

Question

In what order are elements with a tabindex value of 0 focused when the web page is tabbed?

worth noting- in my testing tabindex="0" is the same as not having a tabindex on an element — Kip, Oct 10 '12 at 18:59
@Kip one difference that tabindex="0" makes is that elements that are not normally tab-able can be made tab-able by adding tabindex="0", ironically without actually specifying a tab index for them. — Nat, May 12 '14 at 13:58

score 116 · Answer 1 · edited Nov 18 '16 at 18:29

116

tabindex assignments are handled the following way (for elements that support the tabindex attribute):

Positive numbers (1,2,3...32767) are handled in tab order.
0 is handled in source order (the order it appears in the DOM)
-1 is ignored during tabbing but is focusable.

This information is taken from : http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex

edited Nov 18 '16 at 18:29

Volker E.

5,911
11
47
64

answered Jun 14 '13 at 17:09

haltersweb

3,001
2
13
14

12

Just to emphasise - positive numbers are handled FIRST, then elements with tabindex of 0 and tabbable elements with no tabindex (in source order). – gpr Apr 29 '14 at 05:33
3

Clear and conceive. This should be the accepted answer. – nachtigall Jun 10 '15 at 10:18
1

The part “for elements that support the `tabindex` attribute” is not fully clear, as in current HTML specifications (WHATWG: https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute) it's defined as global attribute and just historically browsers (f.e. Internet Explorer) didn't take it into account on non-interactive elements per se. – Volker E. Nov 18 '16 at 18:28
In addition to being able to focus elements programmatically with the `focus()` method, the element is also click focusable (not sure which if not all browsers support it). https://html.spec.whatwg.org/multipage/interaction.html#click-focusable – MajeStic Jul 23 '20 at 13:39

score 41 · Accepted Answer · answered Nov 07 '10 at 00:52

41

The HTML specification states:

Elements that have identical tabindex values should be navigated in the order they appear in the character stream.

answered Nov 07 '10 at 00:52

Alan Haggai Alavi

72,802
19
102
127

4

what does character stream mean? – HELP Nov 07 '10 at 00:53
6

@snufey, the order in which they appear in the document's (x)html mark-up is as good an interpretation as any. Therefore two elements of identical `tabindex` values will focus on the first to appear in the mark-up first, and then move to the next (but remember that the order on the page *doesn't* equate to order in the mark-up, due to css). – David Thomas Nov 07 '10 at 00:55

score 22 · Answer 3 · answered Nov 07 '10 at 01:54

It's a bit more complicated than Alan Haggai Alavi's answer.

After parsing, IE8 and Opera do as the HTML4 spec says. Firefox and Chrome however use DOM order. This matters with malformed markup like this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Test case 1</title>
  </head>
  <body>
    <form>
      <table>
        <tr><td><input id="first" value="first in the character stream" tabindex="0"></td></tr>
        <div><input id="second" value="second in the character stream" tabindex="0"></div>
      </table>
    <form>
  </body>
</html>

You might well argue that with malformed mark-up all bets are off anyway, so what about JavaScript?

Consider this case:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Test case 2</title>
    <script type="text/javascript">
      moveFirst = function()
      {
        var f = document.getElementById("first");
        f.parentNode.removeChild(f);
        document.body.appendChild(f);
      }
    </script>
  </head>
  <body>
    <form>
      <table>
        <tr><td><input id="first" value="first in the character stream" tabindex="0"></td></tr>
        <tr><td><div><input id="second" value="second in the character stream" tabindex="0"></div></td></tr>
      </table>
    <form>
    <div onclick="moveFirst()">move</div>
  </body>
</html>

In this case, when a user clicks on "move", IE8, Firefox, Chrome and Opera all use DOM order, not character stream order.

Finally HTML5 offers pretty much no guarantees about the tab order between elements that have a tabindex of 0, merely stating that it should follow platform conventions.

score 0 · Answer 4 · answered Oct 13 '14 at 02:38

0

tabindex="0" can include tabbing to non-page elements of the web browser, such as the URL address bar.

Tested to be the case for Firefox 32.03.

answered Oct 13 '14 at 02:38

Kevin

2,234
2
21
26

Where do tabindex="0" HTML elements end up in the tabbing order?

4 Answers4

Linked