-
Notifications
You must be signed in to change notification settings - Fork 4
/
933.txt
296 lines (217 loc) · 13 KB
/
933.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
[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>