CODEWITHSUNDEEP
htmltabindex
HELP
HELP

Reputation: 14585

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

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

Upvotes: 59

Views: 77779

Answers (4)

haltersweb
haltersweb

Reputation: 3149

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

Upvotes: 124

Kevin
Kevin

Reputation: 2746

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.

Upvotes: 0

Alohci
Alohci

Reputation: 83125

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.

Upvotes: 22

Alan Haggai Alavi
Alan Haggai Alavi

Reputation: 74272

The HTML specification states:

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

Upvotes: 42

Related Questions