web-dev-qa-db-ja.com

tabindex = "0" HTML要素はタブ順序のどこに位置しますか？

Webページがタブ化されたときに、tabindex値が0の要素はどの順序でフォーカスされますか？

htmltabindex
37
HELP

HTML仕様 状態：

Tabindex値が同じ要素は、文字ストリームに表示される順序でナビゲートする必要があります。

31
Alan Haggai Alavi

tabindex割り当ては、次の方法で処理されます（tabindex属性をサポートする要素の場合）：

  • 正数（1,2,3 ... 32767）はタブ順に処理されます。
  • 0はソースの順序（DOMに表示される順序）で処理されます
  • -1はタブ移動中に無視されますが、フォーカス可能です。

この情報は以下から取得されます。 http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex

89
haltersweb

Alan Haggai Alaviの答えよりも少し複雑です。

解析後、IE8とOperaはHTML4仕様のとおりです。FirefoxとChromeただしDOM順序を使用します。これはこのような不正なマークアップで問題になります。

<!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>

不正なマークアップでは、とにかくすべてのベットがオフになっていると主張するかもしれませんが、JavaScriptについてはどうでしょうか？

この場合を考えてみましょう：

<!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>

この場合、ユーザーが「move」、IE8、Firefoxをクリックすると、ChromeおよびOperaはすべて、文字ストリーム順序ではなくDOM順序を使用します。

最後に HTML5 は、tabindexが0の要素間のタブ順序についてほとんど保証せず、単にプラットフォームの規則に従うべきであると述べています。

22
Alohci

例を覚えておくのが最善の方法です。

キーボードのTabキーを押していると仮定します

<button tabindex="0">one</button>
<button tabindex="-1">two</button>
<button tabindex="0">three</button>
<button tabindex="5">four</button>

最初のfourは、Tabを押しているときにフォーカスされます（tabindexが最も高いため）
then one（tabindexは0で、次に高いが、ドキュメントに最初に表示されるため）
then three（tabindexは上記と同じですが、ドキュメントに2番目が表示されるため）
それ以外は何もありません（tabindexが-1であるため、twoはフォーカスされません）

Tabindex = "0"が必要なのはなぜですか？とにかくタブはボタンで止まりますよね？
はい、次のようにdivにタブストップを設定することもできます。

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

たとえば、これはスクリーンリーダーがdiv内のテキストを読み取ろうとするときに役立ちます。

お役に立てば幸いです。

2
Manohar Reddy Poreddy

tabindex="0"は、URLアドレスバーなど、Webブラウザーの非ページ要素へのタブ移動を含めることができます。

Firefox 32.03の場合にテスト済み

0
Kevin