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

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

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

[3] 仕様書:

代替

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

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

属性値

[6] この属性の値は NUMBER です。 値は 0 と 32767 (= 215 − 1) の間の数でなければなりません。 UA<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">利用者エージェント</anchor> は先導零を無視するべきです。 HTML 4 17.11.1

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

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

UA による利用

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

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

  1. tabindex 属性があり、正の値を割当てられている要素を最初に。
    • 小さな値のものから大きな値のものへ。
    • 値は連続している必要もないし、特定の値から始める必要もない。
    • 同じ値の要素は文書順に。
  2. 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 ( 版) 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 ( 版) http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-hyperAttributes.html#adef_hyperAttributes_nextfocus

関連

[16] SMIL には読み上げの順序を指定する readIndex 属性があります。

不思議解釈

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

例

[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

(名無しさん)

メモ

[13] The new 'tabindex' - Anne’s Weblog about Markup & Style http://annevankesteren.nl/2005/08/tabindex (名無しさん 2005-08-23 00:23:47 +00:00)

[14] Extending tabindex for custom HTML widgets http://www.mozilla.org/access/keyboard/tabindex (名無しさん)

[18] tabindex="" feedback (Ian Hickson <ian@...> 著, 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/13860

[32768] The SMIL 3.0 Linking Modules ( 版) http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-extended-linking.html#adef-tabindex

[32769] WEB+DB PRESS Vol.49 WAI-ARIA: Days on the Moon ( 版) http://nanto.asablo.jp/blog/2009/03/02/4148011

[32773] Techniques for WCAG 2.0 ( ( 版)) http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/complete.html#H4-description

[32774] [whatwg] tabindexscope ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-January/034573.html

[32775] [whatwg] tabindexscope ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-June/036310.html

[32776] [whatwg] tabindexscope ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-August/037022.html

[32777] IRC logs: freenode / #whatwg / 20130127 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130127

[32778] IRC logs: freenode / #whatwg / 20131210 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20131210

[32779] Web Applications 1.0 r7602 Grand <menu> revamp. Note: This patch includes parser changes. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7601&to=7602

[32780] Web Applications 1.0 r8513 Define how focus navigation works ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8512&to=8513

[32781] IRC logs: freenode / #whatwg / 20140226 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20140226#l-368

[32782] IRC logs: freenode / #whatwg / 20140227 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20140227

[32783] Web Applications 1.0 r8488 Disallow <dialog tabindex>, for sanity ( 版) http://html5.org/tools/web-apps-tracker?from=8487&to=8488

[32785] Web Applications 1.0 r8490 The tabindex= attribute makes an element interactive.]] ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8489&to=8490

[32786] svg2: changeset 691:ae04f57c3073 ( ( 版)) https://dvcs.w3.org/hg/svg2/rev/ae04f57c3073d87004f24685b623d95bd17b795f

[32787] IRC logs: freenode / #whatwg / 20141017 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20141017

[32788] チェンジセット 168313 – WebKit ( ( 版)) http://trac.webkit.org/changeset/168313

[32789] 778654 – implement tabindex attribute for SVG content ( ( 版)) https://bugzilla.mozilla.org/show_bug.cgi?id=778654

[12] Note how the SVG currently implemented in browsers is a mix of SVG 1.… · whatwg/html@969c45b ( 版) https://github.com/whatwg/html/commit/969c45b2478d1d2d3be8564ec85dc316a53c8bcf

[17] Fix #345: Remove table sorting model · whatwg/html@59b7e24 ( 版) https://github.com/whatwg/html/commit/59b7e2466c2b7c5c408a4963b05b13fd808aa07a

[19] Replace Focus section with a reference to HTML's focus processing model. · w3c/svgwg@6997e03 ( 版) https://github.com/w3c/svgwg/commit/6997e031b59eaf4ca39a3d645dbdb1dfc6dbc47c

[20] Urge developers to use caution with positive tabindex values · whatwg/html@3ef29a7 ( 版) https://github.com/whatwg/html/commit/3ef29a7467e89bd06c30235e466c120087f25eea

[21] Remove tabindex's synthetic click event feature (annevk著, ) https://github.com/whatwg/html/commit/35e3e1ec556de58da08d928ee033b7d10e91d1b9

[22] Add activation behavior for <summary> (domenic著, ) https://github.com/whatwg/html/commit/5e0b8e673d09bc6042190335f9e522e9c802d26c

[23] 23960 – FKA: Need contextual scoping for tabindex () https://www.w3.org/Bugs/Public/show_bug.cgi?id=23960

[24] tabindex, bugs in description, REALITY of tabindex in ALL browsers · Issue #3505 · whatwg/html () https://github.com/whatwg/html/issues/3505

[25] tabindex, bugs in description, REALITY of tabindex in ALL browsers · Issue #3505 · whatwg/html () https://github.com/whatwg/html/issues/3505

[26] Add HTMLOrSVGElement interface mixin (annevk著, ) https://github.com/whatwg/html/commit/81e82437a7ef1ee37d4ce2b5a982bc297d5b58b1

[27] Move dataset from HTMLElement to a mixin shared with SVGElement · Issue #3471 · whatwg/html () https://github.com/whatwg/html/issues/3471

[28] Add HTMLOrSVGElement interface mixin by annevk · Pull Request #3543 · whatwg/html () https://github.com/whatwg/html/pull/3543

[29] 29093 – Elements that are focusable but not in the tab order should probably not have tabindex by default 0 () https://www.w3.org/Bugs/Public/show_bug.cgi?id=29093

[30] Add HTMLOrSVGElement mixn (dstorey著, ) https://github.com/w3c/svgwg/commit/bf070f6e46face7169561d4ea7dae45b93210dfb

[31] Add link to HTML tabIndex IDL attribute (dstorey著, ) https://github.com/w3c/svgwg/commit/2a9755a2568c9ef39b34afd4af2dad09c795b4b3

[32] Reference SVG 2 (dstorey著, ) https://github.com/whatwg/html/commit/7069de4fcf2f92295dded520ed5d7275addab2e7

[33] Update sequential focus navigation to include shadow trees (rakina著, ) https://github.com/whatwg/html/commit/d19d9632020824b827dff54c1ce9125f546aab25

[34] Define different types of focusability (rakina著, ) https://github.com/whatwg/html/commit/1ab7c860732d8a1c144ebb86bd08c90f1be7b958

[35] Define different types of "focusable" & remove "tabindex focus flag" by rakina · Pull Request #4768 · whatwg/html () https://github.com/whatwg/html/pull/4768

[36] Further tabIndex getter tweaks (domenic著, ) https://github.com/whatwg/html/commit/7ce0b474147ac0574eb3e739f1a9c27e49a249ad

[37] Define what tabIndex returns when the tabindex attribute is not set (rakina著, ) https://github.com/whatwg/html/commit/15cf23a55d629e0b1286302c19634833a89292ab

[38] Further tabIndex getter tweaks by domenic · Pull Request #4759 · whatwg/html · GitHub () https://github.com/whatwg/html/pull/4759

[39] Make the default tabIndex for <frame> 0 (domenic著, ) https://github.com/whatwg/html/commit/7952ba43a9a7c2f0295359f8dbe097e5f1bdbfd5

[40] The default tab index of frame element should be 0 · Issue #4855 · whatwg/html · GitHub () https://github.com/whatwg/html/issues/4855

[41] Make the default tabIndex for <frame> 0 by domenic · Pull Request #4859 · whatwg/html · GitHub () https://github.com/whatwg/html/pull/4859

[42] Define what tabIndex returns when the tabindex attribute is not set (rakina著, ) https://github.com/whatwg/html/commit/15cf23a55d629e0b1286302c19634833a89292ab

[43] Define what tabIndex returns when the tabindex attribute is not set by rakina · Pull Request #4754 · whatwg/html () https://github.com/whatwg/html/pull/4754

[44] "The tabIndex IDL attribute must reflect the val..." · Issue #1786 · whatwg/html () https://github.com/whatwg/html/issues/1786

[45] Clarify "focusable" in the context of tabIndex IDL attribute · Issue #4464 · whatwg/html () https://github.com/whatwg/html/issues/4464

[46] Editorial: nested browsing context is a member, not a type (annevk, , ) https://github.com/whatwg/html/commit/6b737bbc428facf34ec3728c0912cf9e172d0ea4