56

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

2
  • 1
    worth noting- in my testing tabindex="0" is the same as not having a tabindex on an element
    – Kip
    Oct 10, 2012 at 18:59
  • 4
    @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, 2014 at 13:58

4 Answers 4

118

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

4
  • 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, 2014 at 5:33
  • 3
    Clear and conceive. This should be the accepted answer.
    – nachtigall
    Jun 10, 2015 at 10:18
  • 1
    The part “for elements that support the tabindex attribute” is not fully clear, as in current HTML specifications (WHATWG: html.spec.whatwg.org/multipage/…) 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, 2016 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). html.spec.whatwg.org/multipage/interaction.html#click-focusable
    – MajeStic
    Jul 23, 2020 at 13:39
42

The HTML specification states:

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

2
  • 4
    what does character stream mean?
    – HELP
    Nov 7, 2010 at 0: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). Nov 7, 2010 at 0:55
22

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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.