Edit

Page

Page title:

Page body:

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

[CODE(HTMLa)[tabindex]] 属性を指定できる要素は次のものです。
:ハイパーリンク:[CODE(HTMLe)[[[a]]]], [CODE(HTMLe)[[[area]]]]
:フォーム制御子:[CODE(HTMLe)[[[button]]]], [CODE(HTMLe)[[[input]]]], 
[CODE(HTMLe)[[[object]]]], [CODE(HTMLe)[[[select]]]], [CODE(HTMLe)[[[textarea]]]]

[3] 仕様書:
- [[HTML 4]] ([[Web Forms 1.0]])
-- [CITE[17.11.1 Tabbing navigation]]
<IW:HTML4:"interact/forms.html#tabbing-navigation">
-- [CITE[B.6.1 Incremental display]]
<IW:HTML4:"appendix/notes.html#h-B.6.1">

** 代替

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

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

[[#comment]]

** 属性値

[6] この属性の値は [CODE(SGML)[[[NUMBER]]]] です。
値は [CODE(HTML)[0]] と [CODE(HTML)[32767]] ([CODE(math)[= 2[SUP[15]] − 1]]) 
の間の数でなければなりません。 
[ABBR[[[UA]]] [[[利用者エージェント]]]] 
は[[先導零]]を無視するべきです。 [SRC[HTML 4 17.11.1]]

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

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

[[#comment]]

** UA による利用

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

焦点を受取る要素は、次の規則に従って決めるべきです。 
[SRC[HTML 4 17.11.1]]
= [CODE(HTMLa)[tabindex]] 属性があり、正の値を割当てられている要素を最初に。
-- 小さな値のものから大きな値のものへ。
-- 値は連続している必要もないし、特定の値から始める必要もない。
-- 同じ値の要素は[[文書順]]に。
= [CODE(HTMLa)[tabindex]] 要素のない要素やあっても [CODE(HTML)[0]]
なものを次に。
-- 文書順に。
- [[無効化]]されている要素はタブ順序に関わらない。

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

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

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

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

* [CODE(HTMLe)@en[dialog]] 要素

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

* 歴史

*** [CODE(HTMLa)@en[navindex]] 属性

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

;; [CITE@en[- XHTML Attribute Collections]] ([TIME[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] [CODE(HTMLa)@en[[[href]]]] [[属性]]がすべての[[要素]]に拡大されたことを踏まえて
[CODE(HTMLa)@en[[[navindex]]]] もすべての[[要素]]で定義されることとなったと思われます。

** [CODE(HTMLa)@en[prevfocus]] 属性、[CODE(HTMLa)@en[nextfocus]] 属性

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

;; [CITE@en[- XHTML Hypertext Attributes Module]] ([TIME[2004-07-22 15:25:35 +09:00]] 版) <http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-hyperAttributes.html#adef_hyperAttributes_nextfocus>

** 関連

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

** 不思議解釈

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

[[#comment]]

** 例

[9] 例 [SRC[HTML 4 17.11.1]]
[PRE(HTML)[
<!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>
]PRE]

この例では、 [SAMP[get-database]] → [SAMP[field1]] → [SAMP[field2]] → [SAMP[submit]]
→ [SAMP(HTMLe)[a]] となります。

[15]

[PRE(HTML invalid example code)[
<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>
]PRE]

;; 出典: [[Windows XP]] [[日本語版]]の
[CODE(file)@en[C:\windows\help\Tours\htmlTour\connected_multiple.htm]]

([[名無しさん]])

[[#comment]]

** メモ

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

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

[18]
[CITE[tabindex="" feedback]] ([[Ian Hickson <ian@...>]] 著, [TIME[2008-04-24 09:47:24 +09:00]] 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/13860>

[32768] [CITE[The SMIL 3.0 Linking Modules]] ([TIME[2008-12-02 00:45:09 +09:00]] 版) <http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-extended-linking.html#adef-tabindex>

[32769] [CITE@ja[WEB+DB PRESS Vol.49 WAI-ARIA: Days on the Moon]] ([TIME[2009-03-08 16:54:08 +09:00]] 版) <http://nanto.asablo.jp/blog/2009/03/02/4148011>

[32773] [CITE@en-US[Techniques for WCAG 2.0]]
( ([TIME[2012-01-04 03:18:29 +09:00]] 版))
<http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/complete.html#H4-description>

[32774] [CITE[''''''[''''''whatwg'''''']'''''' tabindexscope]]
( ([TIME[2012-01-31 08:28:31 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-January/034573.html>

[32775] [CITE[''''''[''''''whatwg'''''']'''''' tabindexscope]]
( ([TIME[2012-06-08 08:05:14 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-June/036310.html>

[32776] [CITE[''''''[''''''whatwg'''''']'''''' tabindexscope]]
( ([TIME[2012-08-28 21:41:04 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-August/037022.html>

[32777] [CITE[IRC logs: freenode / #whatwg / 20130127]]
( ([TIME[2013-01-28 21:17:15 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20130127>

[32778] [CITE[IRC logs: freenode / #whatwg / 20131210]]
( ([TIME[2013-12-12 23:22:40 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20131210>

[32779] [CITE@en[Web Applications 1.0 r7602       Grand <menu> revamp. Note: This patch includes parser changes.]]
( ([TIME[2012-12-29 10:23:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7601&to=7602>

[32780] [CITE@en[Web Applications 1.0 r8513     Define how focus navigation works]]
( ([TIME[2014-02-27 09:30:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8512&to=8513>

[32781] [CITE[IRC logs: freenode / #whatwg / 20140226]]
( ([TIME[2014-03-01 02:18:22 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20140226#l-368>

[32782] [CITE[IRC logs: freenode / #whatwg / 20140227]]
( ([TIME[2014-03-02 00:57:08 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20140227>

[32783] [CITE@en[Web Applications 1.0 r8488  Disallow <dialog tabindex>, for sanity]] ([TIME[2014-02-21 07:52:00 +09:00]] 版) <http://html5.org/tools/web-apps-tracker?from=8487&to=8488>

[32785] [CITE@en[Web Applications 1.0 r8490  The tabindex='' attribute makes an element interactive.]]
( ([TIME[2014-02-21 08:30:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8489&to=8490>

[32786] [CITE@en-US[svg2: changeset 691:ae04f57c3073]]
( ([TIME[2014-08-15 08:35:07 +09:00]] 版))
<https://dvcs.w3.org/hg/svg2/rev/ae04f57c3073d87004f24685b623d95bd17b795f>

[32787] [CITE[IRC logs: freenode / #whatwg / 20141017]]
( ([TIME[2014-10-18 08:43:54 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20141017>

[32788] [CITE[チェンジセット 168313 – WebKit]]
( ([TIME[2014-10-19 02:11:14 +09:00]] 版))
<http://trac.webkit.org/changeset/168313>

[32789] [CITE@en[778654 – implement tabindex attribute for SVG content]]
( ([TIME[2014-10-19 02:11:41 +09:00]] 版))
<https://bugzilla.mozilla.org/show_bug.cgi?id=778654>

[12] [CITE@en[Note how the SVG currently implemented in browsers is a mix of SVG 1.… · whatwg/html@969c45b]]
([TIME[2015-11-18 11:29:45 +09:00]] 版)
<https://github.com/whatwg/html/commit/969c45b2478d1d2d3be8564ec85dc316a53c8bcf>

[17] [CITE@en[Fix #345: Remove table sorting model · whatwg/html@59b7e24]]
([TIME[2016-01-29 23:32:16 +09:00]] 版)
<https://github.com/whatwg/html/commit/59b7e2466c2b7c5c408a4963b05b13fd808aa07a>

[19] [CITE@en[Replace Focus section with a reference to HTML's focus processing model. · w3c/svgwg@6997e03]]
([TIME[2016-02-06 12:31:27 +09:00]] 版)
<https://github.com/w3c/svgwg/commit/6997e031b59eaf4ca39a3d645dbdb1dfc6dbc47c>

[20] [CITE@en[Urge developers to use caution with positive tabindex values · whatwg/html@3ef29a7]]
([TIME[2016-03-25 12:25:23 +09:00]] 版)
<https://github.com/whatwg/html/commit/3ef29a7467e89bd06c30235e466c120087f25eea>

[21] [CITE@en[Remove tabindex's synthetic click event feature]]
([[annevk]]著, [TIME[2016-11-04 00:03:54 +09:00]])
<https://github.com/whatwg/html/commit/35e3e1ec556de58da08d928ee033b7d10e91d1b9>

[22] [CITE@en[Add activation behavior for <summary>]]
([[domenic]]著, [TIME[2017-01-20 07:19:02 +09:00]])
<https://github.com/whatwg/html/commit/5e0b8e673d09bc6042190335f9e522e9c802d26c>

[23] [CITE@en[23960 – FKA: Need contextual scoping for tabindex]]
([TIME[2017-07-23 14:22:10 +09:00]])
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=23960>

[24] [CITE@en[tabindex, bugs in description, REALITY of tabindex in ALL browsers · Issue #3505 · whatwg/html]]
([TIME[2018-02-26 11:56:17 +09:00]])
<https://github.com/whatwg/html/issues/3505>

[25] [CITE@en[tabindex, bugs in description, REALITY of tabindex in ALL browsers · Issue #3505 · whatwg/html]]
([TIME[2018-03-23 02:13:57 +09:00]])
<https://github.com/whatwg/html/issues/3505>

[26] [CITE@en[Add HTMLOrSVGElement interface mixin]]
([[annevk]]著, [TIME[2018-03-23 19:30:45 +09:00]])
<https://github.com/whatwg/html/commit/81e82437a7ef1ee37d4ce2b5a982bc297d5b58b1>

[27] [CITE@en[Move dataset from HTMLElement to a mixin shared with SVGElement · Issue #3471 · whatwg/html]]
([TIME[2018-03-24 17:58:44 +09:00]])
<https://github.com/whatwg/html/issues/3471>

[28] [CITE@en[Add HTMLOrSVGElement interface mixin by annevk · Pull Request #3543 · whatwg/html]]
([TIME[2018-03-24 18:04:04 +09:00]])
<https://github.com/whatwg/html/pull/3543>

[29] [CITE@en[29093 – Elements that are focusable but not in the tab order should probably not have tabindex by default 0]]
([TIME[2018-05-08 10:53:36 +09:00]])
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=29093>

[30] [CITE@en[Add HTMLOrSVGElement mixn]]
([[dstorey]]著, [TIME[2018-04-18 09:31:56 +09:00]])
<https://github.com/w3c/svgwg/commit/bf070f6e46face7169561d4ea7dae45b93210dfb>

[31] [CITE@en[Add link to HTML tabIndex IDL attribute]]
([[dstorey]]著, [TIME[2018-04-20 06:29:23 +09:00]])
<https://github.com/w3c/svgwg/commit/2a9755a2568c9ef39b34afd4af2dad09c795b4b3>

[32] [CITE@en[Reference SVG 2]]
([[dstorey]]著, [TIME[2018-05-18 15:05:35 +09:00]])
<https://github.com/whatwg/html/commit/7069de4fcf2f92295dded520ed5d7275addab2e7>

[33] [CITE@en[Update sequential focus navigation to include shadow trees]]
([[rakina]]著, [TIME[2019-06-26 17:30:32 +09:00]])
<https://github.com/whatwg/html/commit/d19d9632020824b827dff54c1ce9125f546aab25>

[34] [CITE@en[Define different types of focusability]]
([[rakina]]著, [TIME[2019-07-16 11:39:59 +09:00]])
<https://github.com/whatwg/html/commit/1ab7c860732d8a1c144ebb86bd08c90f1be7b958>

[35] [CITE@en[Define different types of "focusable" & remove "tabindex focus flag" by rakina · Pull Request #4768 · whatwg/html]]
([TIME[2020-05-14 13:59:23 +09:00]])
<https://github.com/whatwg/html/pull/4768>

[36] [CITE@en[Further tabIndex getter tweaks]]
([[domenic]]著, [TIME[2019-07-10 03:43:46 +09:00]])
<https://github.com/whatwg/html/commit/7ce0b474147ac0574eb3e739f1a9c27e49a249ad>

[37] [CITE@en[Define what tabIndex returns when the tabindex attribute is not set]]
([[rakina]]著, [TIME[2019-07-10 03:13:55 +09:00]])
<https://github.com/whatwg/html/commit/15cf23a55d629e0b1286302c19634833a89292ab>

[38] [CITE@en[Further tabIndex getter tweaks by domenic · Pull Request #4759 · whatwg/html · GitHub]]
([TIME[2020-07-13 12:30:34 +09:00]])
<https://github.com/whatwg/html/pull/4759>

[39] [CITE@en[Make the default tabIndex for <frame> 0]]
([[domenic]]著, [TIME[2019-08-23 04:40:17 +09:00]])
<https://github.com/whatwg/html/commit/7952ba43a9a7c2f0295359f8dbe097e5f1bdbfd5>

[40] [CITE@en[The default tab index of frame element should be 0 · Issue #4855 · whatwg/html · GitHub]]
([TIME[2020-07-13 12:32:17 +09:00]])
<https://github.com/whatwg/html/issues/4855>

[41] [CITE@en[Make the default tabIndex for <frame> 0 by domenic · Pull Request #4859 · whatwg/html · GitHub]]
([TIME[2020-07-13 12:32:29 +09:00]])
<https://github.com/whatwg/html/pull/4859>

[42] [CITE@en[Define what tabIndex returns when the tabindex attribute is not set]]
([[rakina]]著, [TIME[2019-07-10 03:13:55 +09:00]])
<https://github.com/whatwg/html/commit/15cf23a55d629e0b1286302c19634833a89292ab>

[43] [CITE@en[Define what tabIndex returns when the tabindex attribute is not set by rakina · Pull Request #4754 · whatwg/html]]
([TIME[2020-07-14 14:45:19 +09:00]])
<https://github.com/whatwg/html/pull/4754>

[44] [CITE@en["The tabIndex IDL attribute must reflect the val..." · Issue #1786 · whatwg/html]]
([TIME[2020-07-14 14:46:32 +09:00]])
<https://github.com/whatwg/html/issues/1786>

[45] [CITE@en[Clarify "focusable" in the context of tabIndex IDL attribute · Issue #4464 · whatwg/html]]
([TIME[2020-07-14 14:50:40 +09:00]])
<https://github.com/whatwg/html/issues/4464>

[46] [CITE@en[Editorial: nested browsing context is a member, not a type]]
([[annevk]], [TIME[2019-11-27 02:46:03 +09:00]], [TIME[2022-01-18T09:07:59.000Z]])
<https://github.com/whatwg/html/commit/6b737bbc428facf34ec3728c0912cf9e172d0ea4>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)