tabindex 属性 (HTML)

[2] HTML の tabindex 属性は、その文書における当該要素のタブ順序中の位置を指定します。

tabindex 属性を指定できる要素は次のものです。

ハイパーリンク: a, area
フォーム制御子: button, input, object, select, textarea

[3] 仕様書:

HTML 4 (Web Forms 1.0)
- 17.11.1 Tabbing navigation IW:HTML4:"interact/forms.html#tabbing-navigation"
- B.6.1 Incremental display IW:HTML4:"appendix/notes.html#h-B.6.1"

代替

[4] タブ順序はスタイル・シートで指定できます。

[5] CSS3 などでは、 nav-up のような特性を使ってより柔軟・容易にタブ順序を指定できます。

属性値

[6] この属性の値は NUMBER です。値は 0 と 32767 (= 2¹⁵ − 1) の間の数でなければなりません。 UA は先導零を無視するべきです。 HTML 4 17.11.1

間 (あいだ) というのは曖昧ですが、一般には 0 と 32767 を含むと解釈されています。

[7] この属性は省略可能です。

UA による利用

[8] タブ順序 (tabbing order) は、利用者が鍵盤によって navigate する時の、要素が焦点を受取る順序です。タブ順序は他の要素内で入れ子になっている要素を含んでいても構いません。 HTML 4 17.11.1

焦点を受取る要素は、次の規則に従って決めるべきです。 HTML 4 17.11.1

tabindex 属性があり、正の値を割当てられている要素を最初に。
- 小さな値のものから大きな値のものへ。
- 値は連続している必要もないし、特定の値から始める必要もない。
- 同じ値の要素は文書順に。
tabindex 要素のない要素やあっても 0 なものを次に。
- 文書順に。

無効化されている要素はタブ順序に関わらない。

[11] 一番最初に文書中で tabindex が最小の要素に焦点を与えるのが良いように思えるかもしれませんが、 UAが文書を読み込みながら徐々にレンダリングしているのであれば、文書を全部読み終わるまで最小の要素は決定しません。文書を読み込み終わる前に Tab が打鍵された場合は、その時点で最小の tabindex の要素に焦点を与えるのが適当でしょう。 HTML 4 B.6.1

[10] 焦点を移動したり、要素を活性化したりする実際の打鍵列は、 UA の設定に依存します。例えば、前者を Tab、後者を Enter とすることもできます。 UA は逆順で焦点を移動する打鍵列を定義することもできます。タブ順序の最初や最後に来たときは、 UA は最後や最初に戻しても構いません。 HTML 4 17.11.1

Windows では、焦点移動を Tab、逆移動を Shift + Tab、活性化を Enter で行うのが普通です。 DOS 以前のシステムでは焦点移動を Enter で行うものが多くあり、現在でもそれに強く執着する人が少なからずいます。

特定の入力欄、例えば電話番号の入力欄では、一定の内容が入力されたところで自動的に次の制御子に焦点が移動するような実装もあります。しかし、他の種類の欄の挙動との整合性や値を修正したいときの動作をうまく作らなければ、利用者の戸惑いの原因となる可能性が高いです。

`dialog` 要素

[32784] dialog 要素の機能と矛盾するため、併用は禁止されています >>32783。

歴史

`navindex` 属性

[32770] XHTML2 の最初の作業原案で、ハイパーテキスト属性集成に属し、実質すべての XHTML2 要素で利用できるものとして navindex 属性が定義されました。この属性の実態は HTML4 の tabindex 属性でした。

- XHTML Attribute Collections (2002-08-06 00:20:43 +09:00 版) http://www.w3.org/TR/2002/WD-xhtml2-20020805/mod-attribute-collections.html#adef_attribute-collections_href

[32771] href 属性がすべての要素に拡大されたことを踏まえて navindex もすべての要素で定義されることとなったと思われます。

`prevfocus` 属性、`nextfocus` 属性

[32772] XHTML2 第6次案では navindex 属性に代わり、前や後に焦点が当てられるべき要素の ID を指定する prevfocus 属性、 nextfocus 属性が導入されました。

- XHTML Hypertext Attributes Module (2004-07-22 15:25:35 +09:00 版) http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-hyperAttributes.html#adef_hyperAttributes_nextfocus

不思議解釈

[1] tabindex の値は 0 以上のはずなんですけど、 -1 なんて値を指定してる人もいますね。仕様上は 0 でタブ順割当なしになるはずなのに、ならなくてなぜか -1 ならなる UA がある (具体的にはどれかの版の WinIE。) んだとか。

例

[9] 例 HTML 4 17.11.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with FORM</TITLE>
</HEAD>
<BODY>
...some text...
<P>Go to the 
<A tabindex="10" href="http://www.w3.org/">W3C Web site.</A>
...some more...
<BUTTON type="button" name="get-database"
           tabindex="1" onclick="get-database">
Get the current database.
</BUTTON>
...some more...
<FORM action="..." method="post">
<P>
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</P>
</FORM>
</BODY>
</HTML>

この例では、 get-database → field1 → field2 → submit → a となります。

[15]

<A HREF="hcp://services/layout/fullwindow?topic=MS-ITS%3A%2525HELP_LOCATION%2525%5Carticle.chm%3A%3A/asa_intro.htm" TABINDEX="-1" TARGET="_parent" ><IMG SRC="read_icon.jpg" HEIGHT="34" WIDTH="34" BORDER="0" ALT="ユーザー アカウントに関する記事「コンピュータを共有する」を読んでください。"></A>

出典: Windows XP 日本語版の C:\windows\help\Tours\htmlTour\connected_multiple.htm

(名無しさん)