掲示板/総合質問板/過去ログ/一覧/ tabindexの使い方

0 名前： K+S ： 2006/09/20（水） 15:56 ID:nROqylMa: form関連要素や重要なリンクのa要素に対してtabindex属性を付与するとき、どのような考慮をして値をつけていけばよいのでしょうか？
また、順序を考えて実際に値をつけるとき、「ページ全体で低い数値から連番でつける」「関連要素で番号を区分して数値をつける」といったことについても考慮されることがあるのでしょうか。

サンプルとなるようなページも例示できませんが、
* サイトトップへのリンク
* 他ページへのナビゲーションリンク
* Previous, Nextリンク
* ページ最上部へのリンク
* 検索フォーム
* 投稿フォーム
* その他のフォーム
* 一般的なリンク

こうした要素にtabindexをつける場合、どのような順序を考慮すればよいのでしょうか。ご教示いただければ幸いです。

1 名前：木目 ◆a20iQ0Y76t ： 2006/09/20（水） 15:56 ID:gUtbOS/P: ＞どのような順序を考慮すればよいのでしょうか

tabindex属性というものは、ユーザビリティのためにある属性でしょうから、
ページ作成者（あるいは閲覧者）から見て、最も”この順序が使いやすい”という順序でつけるのが良いのではないでしょうか。
その判断は人によって違うような気もします。

（無知な私見です

2 名前： Z ◆XTzyosZXcL ： 2006/09/20（水） 15:56 ID:O1F9KAP/: 　仕様書上は「0から32767までの数でなければならない」とだけ決められていますね。

HTML4.01仕様書該当部分）
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/forms.html#adef-tabindex
http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex

　順序の決め方については特に明確な指針と言うものはないと思いますが、下記などをご参考にされてみてはいかがでしょうか（人間工学的な考え方など、他に参考になるような資料があるかもしれません）。

ウェブコンテンツアクセシビリティガイドライン(WCAG)1.0（和訳）：
http://www.zspc.com/documents/wcag10/

同基本技術書（和訳）：
http://www.zspc.com/documents/wcag10-tech/core-techniques/

同技術書（和訳）：
http://www.zspc.com/documents/wcag10-tech/

同HTML技術書（和訳）：
http://www.zspc.com/documents/wcag10-tech/html-techniques/

余談・同CSS技術書（和訳）：
http://www.zspc.com/documents/wcag10-tech/css-techniques/

＃本格的にこの辺りに取り組もうとすると、かなり広範囲において確認項目があることに気がつきました。

3 名前：匿名： 2006/09/20（水） 15:56 ID:i4s77xzC: http://www.kanzaki.com/works/2002/pub/wsd04.html#s4-5
http://suika.fam.cx/~wakaba/-temp/wiki/wiki?tabindex
http://pc.2ch.net/hp/kako/1006/10062/1006224399.html
http://web.archive.org/web/20030605231840/http://rappeler.cside.to/Memo/aceskey.html

4 名前： K+S ： 2006/09/20（水） 15:56 ID:nROqylMa: みなさま回答ありがとうございます。

>>1-3 参考にさせていただきました。
しかしながら、提示されたリンク先の文献等を読んでも未だに適切な利用方法を認識できておりません。

form関連要素がpositionプロパティなどで配置されているような場合には、それに応じた指定が考えられそうですが。
単純な流れで作成した場合、tabindexを指定してしまうと逆に利用しにくくなってしまうような気がいたしました。

なんとなくtabindexの実態が分かった気がします。
回答していただいた方ありがとうございました。
短文で恐縮ですが失礼致します。

5 名前：木目 ◆a20iQ0Y76t ： 2006/09/20（水） 15:56 ID:gUtbOS/P: ＞form関連要素がpositionプロパティなどで配置されているような場合には、それに応じた指定が考えられそうですが。
＞単純な流れで作成した場合、tabindexを指定してしまうと逆に利用しにくくなってしまうような気がいたしました。

実際、「何も設定しない方が利用しやすい情況」の方が多いのかもしれませんよ。

6 名前： K+S ： 2006/09/20（水） 15:56 ID:nROqylMa: >>5
仰るとおり、そのような実情を感じました。
しかしながら、WAIでは優先度3としてフォーム関連要素及び重要なリンクに関してTab順序を指定することが推奨とされていますよね。

指定することを前提とすると、どのように指定されることが考えられるのかが気になり質問させていただきました。
フォームが現れたからtabindex属性を指定するというようでは、指定した要素にフォーカスが当たり（アクティブになり）、本文を飛ばしてしまうことが懸念されます。
だからといって、Tab移動の対象となる要素全てにtabindex属性を指定するようなことは、致命的なデメリットはなさそうですが手間がかかります。

結局、何も指定しない方が自然であり無難だと考えられそうなのですが、tabindex属性の指定方法に関して実際はどうなのでしょうか。

7 名前： Z ◆XTzyosZXcL ： 2006/09/20（水） 15:56 ID:O1F9KAP/: 　指定されているWebサイトの方が少数派、というのが”日本においての”実態でしょうね。

　一つのヒントになりそうなのは、下記でご紹介した石川教授のサイト閲覧方法ムービーだと思います（操作は全てキーボード、リンクなどの選択はTABキー、情報は音声が頼り）。

http://www.tagindex.com/cgi-lib/bbs/patio.cgi?mode=view2&f=136&no=14

その他参考サイト：
http://fuji.u-shizuoka-ken.ac.jp/~ishikawa/
http://www9.ocn.ne.jp/~pcvolu/

8 名前：木目 ◆a20iQ0Y76t ： 2006/09/20（水） 15:56 ID:gUtbOS/P: >form関連要素がpositionプロパティなどで配置されているような場合には、それに応じた指定が考えられそうですが。

こういう場合に、最も役立つのでしょうか。

色々と考えているよりも、
一度自ら、キーボードだけで色々なサイトをめぐり、
ウェブページを操作・閲覧してみると、何か見えてくるかもしれません。
（もう実践されているかもしれませんが）

あとは、
逆に「ここは飛ばしても良いな」という部分を見つけるつもりで、
消去法で考えてみてはどうでしょう。

9 名前： K+S ： 2006/09/20（水） 15:56 ID:nROqylMa: コメントありがとうございます。

>>7
ムービーを拝見させていただきましたが、この件にかかわらず参考になりました。

>>8
実際にtab移動をすれば直感的に妥当性が判断できそうですね。
消去法ですか。親要素にtabindexのような属性を付加するとその子孫要素まで反映されるような指定が可能であれば簡単そうですが…。

そもそも、tab移動って「tabキー」のみなのでしょうか。
Windowsでは「shift + tab」でtab移動の順序を戻れますが、
tabindex属性が指定されている要素だけを移動するコマンドのようなものはないのでしょうか。

10 名前： Z ◆XTzyosZXcL ： 2006/09/20（水） 15:56 ID:O1F9KAP/: >そもそも、tab移動って「tabキー」のみなのでしょうか。
>Windowsでは「shift + tab」でtab移動の順序を戻れますが、
>tabindex属性が指定されている要素だけを移動するコマンドのようなものはないのでしょうか。
　基本的にUA依存であり、特に統一的な仕様ではないと思いますが、>>2で上げたHTML4.01仕様書本文のほか、フォームのTABINDEX属性については付属書Bでも指針が示されています。

HTML4.01仕様書附属書Bの該当部分；
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/appendix/notes.html#h-B.6
http://www.w3.org/TR/html401/appendix/notes.html#h-B.6

　XHTML1.0以降でもこの辺りは継承されていると思います。

11 名前： K+S ： 2006/09/20（水） 15:56 ID:bSfzoe4.: コメントありがとうございます。
タブ順序に関しては、関与する問題を考慮しなければなりませんね。
うまく利用できる場面で使っていこうと思います。

ありがとうございました。失礼します。